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: https://stackoverflow.com/questions/11796093/named-parameters-in-javascript — Aardbei, Apr 14 '19 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, Apr 14 '19 at 15:29
i want just write: open_alert(button3Display='inline-block'); without all others. — SchoolforDesign, Apr 14 '19 at 15:30

MSclavi · Accepted Answer · 2019-04-14T15:58:51.447

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 — MSclavi, Apr 14 '19 at 15:31
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, Apr 14 '19 at 15:33
@SchoolforDesign here is a fiddle a little bit better (https://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 — MSclavi, Apr 14 '19 at 15:42
Nice! thank you for helping me. can you change the above code please — SchoolforDesign, Apr 14 '19 at 15:55
@SchoolforDesign done. Could you select my answer as correct? — MSclavi, Apr 14 '19 at 15:59

Pass parameter to a function

1 Answers1