Question

我想要一个按钮来根据他们选择的按钮创建一个元素（＆＃34; img＆＃34;）。例如，我有一个甜酸的选择。如果他们点击甜蜜选项，然后点击提交按钮弹出一个图像，但如果他们点击酸按钮，然后点击提交按钮弹出一个不同的img。继承人到目前为止我所拥有的。

    <html>
    <div id='prefPage'>
    <header id='header2pref'>
    <div id='title2pref'>PREFERENCES</div>
    </header>

    <div id='body'>
    <div id='leftAlign'>



    <div id='drinkImg'><img src='logomain.png'></div>
    </div>

    <button id='myBtn2' onmousedown="mouseDownclear2()" onmouseup="mouseUpclear2()">SET PREFRENCES</button>


        <button id='buyBut' onmousedown="mouseDownclear()" onmouseup="mouseUpclear()">CLEAR PREFRENCES</button>


     <div id='rightAlignPref'>

     <div id=fixed>
     <div id="liqpicloc">



       </div>

        <div>
        <button id="button1">SWEET</button>
        <button id="button2">SOUR</button>
        </div>

        <div>
        <button id="button3">WEAK </button>
        <button id="button4">STRONG</button>
        </div>

        <div>
        <button id="button5">CHEAP</button>
        <button id="button6">PRICEY</button>
        </div>
        </div>

        </div>


  </div>
  </div>
  </html>


    var button1 = document.getElementById("button1");
    var button2 = document.getElementById("button2");
    var pref = document.getElementById("myBtn2");    
    var liqpic = document.getElementById("liqpicloc");
    var liqpicloc = document.getElementById("liqpicloc");



    if(button1.style.backgroundColor = "FCCE08"){

          }  


    pref.addEventListener("click", function () {

        var liqpic = document.createElement("img");
        liqpic.src = "vodka.svg" ;
        liqpicloc.appendChild(liqpic);



   if(button2.style.backgroundColor = "FCCE08"){

          }  


    pref.addEventListener("click", function () {

        var liqpic = document.createElement("img");
        liqpic.src = "scotch.svg" ;
        liqpicloc.appendChild(liqpic);




    });

Answer 1

你应该在设置变量的SWEET和SOUR按钮上设置事件监听器，然后SET PREFERENCES按钮上的监听器应该使用该变量。

＆＃13;

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var pref = document.getElementById("myBtn2");
var liqpic = document.getElementById("liqpic");

var liqpicurl;

button1.addEventListener('click', function() {
  liqpicurl = 'vodka.jpg';
});

button2.addEventListener('click', function() {
  liqpicurl = 'scotch.jpg';
});

pref.addEventListener('click', function() {
  liqpic.src = liqpicurl;
  liqpic.alt = liqpicurl;
})

＆＃13;

<button id='myBtn2'>SET PREFRENCES</button>
<button id='buyBut'>CLEAR PREFRENCES</button>

<div id='rightAlignPref'>

  <div id=fixed>
    <div id="liqpicloc">
      <img id="liqpic">
    </div>

    <div>
      <button id="button1">SWEET</button>
      <button id="button2">SOUR</button>
    </div>

    <div>
      <button id="button3">WEAK </button>
      <button id="button4">STRONG</button>
    </div>

    <div>
      <button id="button5">CHEAP</button>
      <button id="button6">PRICEY</button>
    </div>
  </div>

</div>

＆＃13;

根据您选择的按钮创建一个元素

1 个答案: