javascript - 将参数传递给函数

Question

我有一个简单的html、css、js代码。我想将所有参数传递给 open_alert 函数。 open_alert 函数中的参数是 (titLe, button1Display, button2Display, button3Display)。
当我通过对其中一个使用 onclick 调用此函数时，结果显示第一个参数。我想传递所有其他我想在 onclick 按钮中使用的调用。谢谢。

<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>

Answer 1

问题是您没有将所有参数传递给函数，因此它采用第一个参数作为标题。

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>

如果检查按钮样式，您会发现显示不同。

编辑片段:

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>