CODEWITHSUNDEEP
javascript
SchoolforDesign
SchoolforDesign

Reputation: 455

Pass parameter to a function

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

Upvotes: 2

Views: 92

Answers (1)

MSclavi
MSclavi

Reputation: 427

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>

Upvotes: 3

Related Questions