代码之家 › 专栏 › 技术社区 › Red Shark

Elseif onclick函数将不显示

html javascript

Red Shark · 技术社区 · 7 年前

我试图通过点击按钮输出答案。问题是,它只对if语句(第一个按钮)执行此操作,而不是对else ifs(第二个和第三个按钮)。我做错什么了?

<body>
<button id="button1" type="button" name="button">Button 1</button>
<button id="button2" type="button" name="button">Button 2</button>
<button id="button3" type="button" name="button">Button 3</button>


<script type="text/javascript">
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");

function message() {

 if (button1.onclick) {
   console.log("fere");
 }

 else if(button2.onclick) {
   console.log("33.");
 }

 else if (button3.onclick) {
   console.log("hiii");
 }
 }


button1.onclick = message;
button2.onclick = message;
button3.onclick = message;

我希望在单击每个按钮后都有这些输出:

菲尔三十三希伊

2 回复 | 直到 7 年前

Kamil KieÅczewski 7 年前

尝试在按钮中使用onclick属性(类似于在Angular/Vue模板中)

function message(n) {

     if (n==1) {
         console.log("fere");
     }

     else if(n==2) {
         console.log("33.");
     }

     else if (n==3) {
         console.log("hiii");
     }
 }

<button id="button1" type="button" onclick="message(1)" name="button">Button 1</button>
<button id="button2" type="button" onclick="message(2)" name="button">Button 2</button>
<button id="button3" type="button" onclick="message(3)" name="button">Button 3</button>

Mario 7 年前

我不确定是否可以根据方法进行检查,通常在这种情况下,根据ID或某些唯一标识符进行验证是很常见的,请尝试以下实现

const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');

function handleButtonClick(event) {
    const target = event.target;
    const id = target.id;

    if (id === 'button1') {
        console.log('fere');

        return;
    }

    if (id === 'button2') {
        console.log('33.');

        return;
    }

    if (id === 'button3') {
        console.log("hiii");

        return;
    }
}

button1.addEventListener('click', handleButtonClick, true);
button2.addEventListener('click', handleButtonClick, true);
button3.addEventListener('click', handleButtonClick, true);

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前