Question

我只是在搞弄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>

Answer 1

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

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

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>

Answer 2

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

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>

Answer 3

您可以执行以下操作，为两个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/

Answer 4

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

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

Answer 5

您可以使用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>

多个单一的onClick事件

5 个答案: