我有一个简单的 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>
最佳答案
问题是您没有将所有参数传递给函数,因此它将第一个参数作为标题。
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>
关于javascript - 将参数传递给函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55676782/