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

Question

我想要一个按钮来根据他们选择的按钮创建一个元素 ("img")。例如，我有酸甜的选择。如果他们单击甜蜜选项，然后单击提交按钮，则会弹出一个图像，但如果他们单击酸味按钮，然后单击提交按钮，则会弹出一个不同的 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 按钮上的侦听器应该使用该变量。

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;
})

<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>

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

create an element based on the button you select

javascript

createelement