Pass parameter to a function

Question

I have a simple html, css, js code. I want to pass all parameters to open_alert function. Parameters in open_alert function are (titLe, button1Display, button2Display, button3Display).
When I call this function by using onclick for one of them, the result shows the first parameter. I want to pass all others just call which I want to use in onclick button. Thanks.

<button onclick="open_alert(button3Display='inline-block');">Click Me</button>
<div id="alertBox" style="display: none;">
<p id='txt'></p>
<button id="btn1">button 1</button>
<button id="btn2">button 3</button>
<button id="btn3">button 2</button>
</div>
<script>
const txt = document.getElementById("txt");
const btn_1 = document.getElementById("btn1");
const btn_2 = document.getElementById("btn2");
const btn_3 = document.getElementById("btn3");
var open_alert = function(titLe, button1Display, button2Display, button3Display){

    if(titLe !== undefined){
        txt.innerText = titLe;
    }else{
        txt.innerText = 'foo';
    }

    if(button1Display !== undefined){
        btn_1.style.display = button1Display;
    }else{
        btn_1.style.display = 'none';
    }

    if(button2Display !== undefined){
        btn_2.style.display = button2Display;
    }else{
        btn_2.style.display = 'none';
    }

    if(button3Display !== undefined){
        btn_3.style.display = button3Display;
    }else{
        btn_3.style.display = 'none';
    }
    document.getElementById("alertBox").style.display = "block";
}
</script>

a busy cat

If I understand correctly, you want to be able to call the function supplying only the argument(s) you're interested in, and all the unspecified arguments remaining undefined? If that's it, perhaps named parameters is what you're looking for! I don't think javascript directly supports these, however you can simulate them with destructuring: stackoverflow.com/questions/11796093/… — Aardbei
– Aardbei, Commented Apr 14, 2019 at 15:28
You haven't passed all parameters which the function needs. You can do function call like open_alert(undefined,undefined,undefined,button3Display='inline-block'); — Divvya Mehta
– Divvya Mehta, Commented Apr 14, 2019 at 15:29
i want just write: open_alert(button3Display='inline-block'); without all others. — SchoolforDesign
– SchoolforDesign, Commented Apr 14, 2019 at 15:30

MSclavi · Accepted Answer · 2019-04-14 15:58:51Z

The issue is that you are not passing all the parameters to the function, so it takes the first parameter as the title.

const txt = document.getElementById("txt");
const btn_1 = document.getElementById("btn1");
const btn_2 = document.getElementById("btn2");
const btn_3 = document.getElementById("btn3");
var open_alert = function(titLe, button1Display, button2Display, button3Display){

    if(titLe !== undefined){
        txt.innerText = titLe;
    }else{
        txt.innerText = 'foo';
    }

    if(button1Display !== undefined){
        btn_1.style.display = button1Display;
    }else{
        btn_1.style.display = 'none';
    }

    if(button2Display !== undefined){
        btn_2.style.display = button2Display;
    }else{
        btn_2.style.display = 'none';
    }

    if(button3Display !== undefined){
        btn_3.style.display = button3Display;
    }else{
        btn_3.style.display = 'none';
    }
    document.getElementById("alertBox").style.display = "block";
}

<button onclick="open_alert('COOL TITLE', 'inline-block', 'flex', 'table');">Click Me</button>
<div id="alertBox" style="display: none;">
<p id='txt'></p>
<button id="btn1">button 1</button>
<button id="btn2">button 3</button>
<button id="btn3">button 2</button>
</div>

If you inspect the buttons styles, you will see that the display is different.

EDIT SNIPPET:

const txt = document.getElementById("txt");
const btn_1 = document.getElementById("btn1");
const btn_2 = document.getElementById("btn2");
const btn_3 = document.getElementById("btn3");
function open_alert(options) {

    if(options.titLe !== undefined){
        txt.innerText = options.titLe;
    }else{
        txt.innerText = 'foo';
    }

    if(options.button1Display !== undefined){
        btn_1.style.display = options.button1Display;
    }else{
        btn_1.style.display = 'none';
    }

    if(options.button2Display !== undefined){
        btn_2.style.display = options.button2Display;
    }else{
        btn_2.style.display = 'none';
    }

    if(options.button3Display !== undefined){
        btn_3.style.display = options.button3Display;
    }else{
        btn_3.style.display = 'none';
    }
    document.getElementById("alertBox").style.display = "block";
}

<button onclick="open_alert({titLe: 'GREAT', button1Display: 'flex'});">Click Me</button>
<div id="alertBox" style="display: none;">
<p id='txt'></p>
<button id="btn1">button 1</button>
<button id="btn2">button 3</button>
<button id="btn3">button 2</button>

@SchoolforDesign then you can pass undefined to the parameters that you do not wnat to use, but still will have to pass the same number of parameter the function has. I would recommend not doing it like this tough, maybe you should find another way
of course, i want pass undefined parameters. could you tell me what another way to do that please? I have team viewer if you want to use it tell me please.
@SchoolforDesign here is a fiddle a little bit better (jsfiddle.net/MSclavi/jtnwo4rh/5). Instead of passing all parameters, you pass a JSON with the values you want. Still, the way this works is kind of confusing, I don't know your objective, so I can't help that much
@SchoolforDesign done. Could you select my answer as correct?

Collectives™ on Stack Overflow

Pass parameter to a function

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related