Question

在网页上，当从下拉列表中进行特定选择时，div的内容必须动态更改。下面是我的代码，我不知道我哪里出错了？任何帮助，将不胜感激。

<head>
<script type="text/javascript">
function fn()
{
    var x = document.getElementsById("select").selectedIndex;
    var y = document.getElementById("a").innerHTML;

    if (X == "0")
    {
        y = " So.. ur a conman" ;
    }
    else
    {
        y = "oops";
    }
}
window.onload = fn() ;
x.onchange = fn() ;
</script>

<body>
<select name="select" id="select">
<option value="consulting"> Consulting </option>
<option value="industry"> Industry </option>
</select>
<div id="a" style="background-color:blue; width:1200px; height:20px; color:black;">
</div>
</body>
</html>

Answer 1

Javascript区分大小写，因此x与X不同。将X更改为x。
y收到内部html的值，而不是内部html的引用。这意味着您无法通过y更改innerHTML。
分配给window.onload时，您当前正在分配函数的返回值。您想要分配函数本身，因此它应该是window.onload = fn;。

改进但未经过测试的代码：

<script type="text/javascript">

var x = document.getElementsById("select");
var y = document.getElementById("a");

function fn()
{

    if (x.selectedIndex == 0)
    {
        y.innerHTML = " So.. ur a conman" ;
    }
    else
    {
        y.innerHTML = "oops";
    }
}

window.onload = fn ;
x.onchange = fn ;

</script>

另外，请注意您的浏览器具有开发人员工具，可以告诉您一些错误。根据您用于测试的浏览器，您可以按F12打开这些工具。看看那里的控制台，你会看到类似于'X' is not defined的消息。

根据下拉选择更改DIV的内容

1 个答案: