Question

我做了一个显示一些文本的按钮，然后我想创建第二个按钮，但是我遇到了问题；如果我单击第二个按钮，它将显示第一个按钮必须显示的内容：

   <div class="wrapper">
          <button class="button1" onclick="myFunction()">I want it !</button>
        </div>
    
    <p style="text-align: center;padding-top: 30px;color: ivory;" id="demo"></p>
    
    <script>
      var hulu ="huluexample6969@gmail.com";
      
    function myFunction() {
      document.getElementById("demo").innerHTML = hulu;
    
    var hbo ="hboexample6969@gmail.com"
     document.getElementById("demo2").innerHTML = hbo;
    }
    
    </script>
    
    <h4 style="padding-top: 80px;padding-left: 60px; color: green;">HBO:</h4>
     <div class="hbo">
      <img src="https://pbs.twimg.com/profile_images/1212600271328530436/XrpOrfrt_400x400.jpg"
     </div>
    <div class="wrapper2">
      <button class="button2" onclick="myFunction()">I want it !</button>
    </div>
    <p style="text-align: left;padding-top: 30px;color: ivory;" id="demo2"></p>

Answer 1

我不确定我是否正确理解了您的问题。

据我所知，两个<button>都有onclick="myFunction()"，这使它们得以执行

var hulu ="huluexample6969@gmail.com";

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

  var hbo ="hboexample6969@gmail.com"
  document.getElementById("demo2").innerHTML = hbo;
}

因此，两者都将操纵ID为“ demo”的<p> s。 “ demo2”。

预期的行为是什么？

Answer 2

您可以使用一个函数执行此操作，只需使用if语句

var hulu ="huluexample6969@gmail.com";

function myFunction(e) {

if (e.target.className == 'button1'){
   document.getElementById("demo").innerHTML = hulu;
}else{
var hbo ="hboexample6969@gmail.com"
 document.getElementById("demo2").innerHTML = hbo;
}}

<div class="wrapper">
      <button class="button1" onclick="myFunction(event)">I want it !</button>
    </div>

<p style="text-align: center;padding-top: 30px;color: blue;" id="demo">aaaaa</p>


<h4 style="padding-top: 80px;padding-left: 60px; color: green;">HBO:</h4>
 <div class="hbo">
  <img src="https://pbs.twimg.com/profile_images/1212600271328530436/XrpOrfrt_400x400.jpg">
 </div>
<div class="wrapper2">
  <button class="button2" onclick="myFunction(event)">I want it !</button>
</div>
<p style="text-align: left;padding-top: 30px;color: blue;" id="demo2">bbbb</p>

按钮2显示与按钮1显示相同的文本

2 个答案: