我刚开始参加 Freecodecamp 类(class)，我一直在做调查表。 我希望选择按钮在用户选择主题时显示图像。
我认为我的 CSS HTML 新手知识无法做到这一点。如果可以使用这些语言完成，我希望熟悉 Javascript 或 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>关于javascript - 单击选择按钮上的选项时如何显示图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58483140/