单击选择按钮上的选项时如何显示图像？

debugcn 发表于 Dev

雷姆·埃文

我刚刚开始参加Freecodecamp课程，但我坚持做一份调查表。我希望选择按钮在用户选择主题时显示图像。

我认为我对CSS HTML的新手知识无法做到这一点。我希望如果Java语言或Jquery上的知识渊博的人可以使用这些语言来帮助我，那么我希望这可以帮助我。

我把这个贴在我的Codepen上了：https ://codepen.io/remevan/pen/poogBeK

<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>

哈克道格

<body>
<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown" onchange="myFunction(this.value)">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>
      <div id = "sampleImg"></div>
</div>
</div>
</div>
</body>
<script>
function myFunction(itm){
 if (itm == "MarvelUniverse"){
      document.body.style.backgroundImage = "url('pathto-MarvelUniverse.jpg')";
 } else  if (itm == "masqueradeBall"){
      document.body.style.backgroundImage = "url('pathto-masqueradeBall.jpg')";
 } else  if (itm == "PinoyAko"){
      document.body.style.backgroundImage = "url('pathto-PinoyAko.jpg')";
 } else  if (itm == "70sShow"){
      document.body.style.backgroundImage = "url('pathto-70sShow.jpg')";
 } else  if (itm == "CandyFactory"){
      document.body.style.backgroundImage = "url('pathto-CandyFactory.jpg')";
 } else {
   document.body.style.backgroundColor = "#000000";
 }
};
</script>

尝试这个

<body>
<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown" onchange="myFunction(this.value)">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>
      <div id = "sampleImg"></div>
</div>
</div>
</div>
</body>
<script>
function myFunction(itm){
 if (itm == "MarvelUniverse"){
      document.body.style.backgroundImage = "url('pathto-MarvelUniverse.jpg')";
 } else  if (itm == "masqueradeBall"){
      document.body.style.backgroundImage = "url('pathto-masqueradeBall.jpg')";
 } else  if (itm == "PinoyAko"){
      document.body.style.backgroundImage = "url('pathto-PinoyAko.jpg')";
 } else  if (itm == "70sShow"){
      document.body.style.backgroundImage = "url('pathto-70sShow.jpg')";
 } else  if (itm == "CandyFactory"){
      document.body.style.backgroundImage = "url('pathto-CandyFactory.jpg')";
 } else {
   document.body.style.backgroundColor = "#eeeeee";
 }
};
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。