gpt4 book ai didi

javascript - 两个相似的 javascript 函数,一个有效,另一个无效,为什么?

转载 作者:太空宇宙 更新时间:2023-11-03 20:18:43 24 4
gpt4 key购买 nike

我是一个 Javascript 初学者,我正在尝试让一些简单的代码工作。我添加了一个片段作为检查,以确保 Javascript 在页面中正常工作,它确实如此。它只是将一些文本从蓝色更改为红色。

第二段代码应该隐藏一个<div>。 ,或根据所选值显示它。它不起作用有人可以指出我正确的方向吗?感谢您的任何建议。

<!DOCTYPE html>
<html>
<head>
<title>getElementById example</title>
<script>
function changeColor(newColor) {
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>

<script>
// EXPAND
function Hide(elementid){
document.getElementById(elementid).style.display = 'none';
}

function Show(elementid){
document.getElementById(elementid).style.display = '';
}
</script>

</head>
<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>

<div id="one">ONE</div>
<div id="two">TWO</div>

<select>
<Option value="javascript:Show('one');javascript:Hide('two')">one</option>
<Option value="javascript:Hide('one');javascript:Show('two')">two</option>
</select>
</body>
</html>

最佳答案

value 属性不运行 JavaScript。

您需要为选择元素绑定(bind)一个change 事件,然后查看所选值以确定显示或隐藏哪个值。

For example :

<div id="one">ONE</div>
<div id="two">TWO</div>
<div id="three">THREE</div>

<select>
<option>one
<option>two
<option>three
</select>

<script>
function show(id) {
document.getElementById(id).style.display = '';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}
function whichDiv(event) {
var select = event.target;
var options = select.options;
for (var i = 0; i < options.length; i++) {
var option = options[i];
if (option.selected) {
show(option.value);
} else {
hide(option.value);
}
}
}

document.querySelector('select').addEventListener('change', whichDiv);
</script>

关于javascript - 两个相似的 javascript 函数,一个有效,另一个无效,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15479091/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com