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

Question

I made a button that displays some text then I wanted to create a second button but I had an issue ; which is if I click on the second button it displays what the first button must display :

 <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

I'm not sure, whether I understand your issue correctly.

From what I can tell, both <button> s have onclick="myFunction()" , which make them execute

var hulu ="huluexample6969@gmail.com";

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

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

So both will manipulate the <p> s with ID "demo" resp. "demo2".

What is the expected behaviour?

Answer 2

you can do it with one function just use a if statement

 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>