多个单一的onClick事件

时间:2019-04-03 03:38:47

标签: javascript

我只是在搞弄JavaScript。我想创建两个单一的单击按钮,每个按钮具有单独的功能。但是,如果有该组代码,则第一个按钮的响应始终是第二个按钮的响应。它可以独立正常工作。

我已经在线仔细检查过并尝试了一些功能,但是一切都回到了多功能按钮上。 我不是超级高级,我只是为了好玩而做随机编程。

如果单击“是”按钮,则应显示“良好”。如果单击否按钮,则应显示“错误”。 当两组代码在一起时,无论显示什么按钮,始终显示“错误”。如果仅隔离第一组代码,则结果为“良好”。

function myFunction() {
  var str = "Good";
  var result = str.link("https://www.allrecipes.com/search/results/?wt=authentic%20taco%20recipes&sort=re");
  document.getElementById("happy").innerHTML = result;
}
</script>               
<button onclick="myFunction()">No</button>

<p id="sad"></p>

<script>
function myFunction() {
  var str = "Bad";
  var result = str.link("https://www.tacobell.com/");
  document.getElementById("sad").innerHTML = result;
}
Do you like tacos?
<br />                 
<button onclick="myFunction()">Yes</button>

<p id="happy"></p>

5 个答案:

答案 0 :(得分:0)

您应该以不同的方式命名您的函数:

实际上,当您在原始代码中声明第二个函数时,它会覆盖第一个函数,因为它们具有相同的名称。

function myGoodFunction() {
  var str = "Good";
  var result = str.link("https://www.allrecipes.com/search/results/?wt=authentic%20taco%20recipes&sort=re");
  document.getElementById("happy").innerHTML = result;
}

function myBadFunction() {
  var str = "Bad";
  var result = str.link("https://www.tacobell.com/");
  document.getElementById("sad").innerHTML = result;
}
Do you like tacos?
<br />                 
<button onclick="myGoodFunction()">Yes</button>

<p id="happy"></p>

               
<button onclick="myBadFunction()">No</button>

<p id="sad"></p>

答案 1 :(得分:0)

您还可以对两个按钮使用单击事件功能。 参见下面的代码-

function myFunction(elem) {
  var btnHtml = elem.innerHTML;
  var str = "Good";
  var id = "happy"
  if(btnHtml == "No"){
    str = "Bad";
    id = "sad";
  }
  
  var result = str.link("https://www.allrecipes.com/search/results/?wt=authentic%20taco%20recipes&sort=re");
  document.getElementById(id).innerHTML = result;
}
Do you like tacos?
<br />                 
<button onclick="myFunction(this)">Yes</button>

<p id="happy"></p>
           
<button onclick="myFunction(this)">No</button>

<p id="sad"></p>

答案 2 :(得分:0)

您可以执行以下操作,为两个onclick事件提供一个功能。

HTML

<p>Click the button to trigger a function.</p>

<button onclick="myFunction('yes')">Yes</button>
<button onclick="myFunction('no')">No</button>

<p id="demo"></p>

JavaScript

function myFunction(value)
{
document.getElementById("demo").innerHTML=value;
}

这是小提琴

http://jsfiddle.net/840Larsn/

答案 3 :(得分:0)

这是因为您正在使用Function构造函数,并且这些函数是在全局范围内创建的,因此第二个函数将覆盖第一个函数。

您可以参考here来查看定义。

答案 4 :(得分:0)

您可以使用jquery,它很简单

$('.clickbtn').click(function(e){
var str,result ;
var data = $(this)
if(data.attr('data-id')==1)
{
   str = "Good";
   result =     str.link("https://www.allrecipes.com/search/results/?wt=authentic%20taco%20recipes&sort=re");
   $("#text").html(result) 
}

else
{
  str = "Bad";
  result = str.link("https://www.tacobell.com/");
  $("#text").html(result)
}


})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Do you like tacos?
<br />                 
<button class="clickbtn" data-id=1>Yes</button>
<button class="clickbtn" data-id=2>No</button>
<p id="text"></p>