将参数传递给函数

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>