Javascript 根据选择的按钮创建元素_Javascript_Createelement

Javascript 根据选择的按钮创建元素

javascript

Javascript 根据选择的按钮创建元素,javascript,createelement,Javascript,Createelement,我想要一个按钮来根据他们选择的按钮创建一个元素（“img”）。例如，我有一个甜和酸的选择。如果他们单击sweet选项，然后单击submit按钮，则会弹出一个图像，但如果他们单击sour按钮，然后单击submit按钮，则会弹出另一个img。这是我到目前为止得到的 <html> <div id='prefPage'> <header id='header2pref'> <div id='title2pref'>PREFE

我想要一个按钮来根据他们选择的按钮创建一个元素（“img”）。例如，我有一个甜和酸的选择。如果他们单击sweet选项，然后单击submit按钮，则会弹出一个图像，但如果他们单击sour按钮，然后单击submit按钮，则会弹出另一个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);




    });


偏好
设置优先级
明确优先权
甜蜜的
酸的
软弱的
坚强的
使用计算机的卫生教育评定程序
昂贵的
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”）；
如果（按钮1.style.backgroundColor=“FCCE08”）{
}  
pref.addEventListener（“单击”，函数（）{
var liqpic=document.createElement（“img”）；
liqpic.src=“vodka.svg”；
liqpicloc.appendChild（liqpic）；
如果（按钮2.style.backgroundColor=“FCCE08”）{
}  
pref.addEventListener（“单击”，函数（）{
var liqpic=document.createElement（“img”）；
liqpic.src=“scotch.svg”；
liqpicloc.appendChild（liqpic）；
});

您应该在设置变量的

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'，函数（）{
liqpicurl='vodka.jpg'；
});
按钮2.addEventListener（'click'，函数（）{
liqpicurl='scotch.jpg'；
});
pref.addEventListener（'click'，function（）{
liqpic.src=liqpicurl；
liqpic.alt=liqpicurl；
})

设置优先级
明确优先权
甜蜜的
酸的
软弱的
坚强的
使用计算机的卫生教育评定程序
昂贵的

您应该在设置变量的

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'，函数（）{
liqpicurl='vodka.jpg'；
});
按钮2.addEventListener（'click'，函数（）{
liqpicurl='scotch.jpg'；
});
pref.addEventListener（'click'，function（）{
liqpic.src=liqpicurl；
liqpic.alt=liqpicurl；
})

设置优先级
明确优先权
甜蜜的
酸的
软弱的
坚强的
使用计算机的卫生教育评定程序
昂贵的

是否有任何错误？如果是，请分享您的错误是，无论我选择哪个按钮，单击“提交”按钮时都会显示两幅图像您的HTML代码是否也缺少一些括号。您真的想将第二个

addEventListener

放在第一个括号内吗？您缺少第一个的结束括号`pref.addEventListener（）呼叫。在此过程中有任何错误吗？如果是，请共享您的错误是，无论我选择哪个按钮，当我单击“提交”按钮时，两个图像都会出现。您的HTML代码是否也缺少一些括号。您真的想将第二个

addEventListener

放在第一个括号内吗？您缺少第一个括号的结束部分`pref.addEventListener（）调用。