javascript - 使用 javascript 在表单内进行 Onchange 和 select 不起作用。如果放在表单之外，它就可以工作

Question

我正在创建一个实时显示变化的表单。当我将代码放入表单中时，它停止工作。

这是 HTML 代码:

<form id="selectform" name="myform" action="dothis.php" method="post">
 <select id="selectProfileIcon" name="newentry" onchange="selectProfileIcon()">
    <option value="aboutme">ABOUT ME</option>
    <option value="aboutus">ABOUT US</option>
    <option value="alert">ALERT</option>
    <option value="services">SERVICES</option>
    <option value="deals">DEALS</option>
    <option value="events">EVENTS</option>
    <option value="hotdeals">HOT DEALS</option>
    <option value="hotpicks">MY PICKS</option>
    <option value="newitems">NEW ITEMS</option>
    <option value="onsale">ON SALE</option>
    <option value="promo">PROMOTION</option>
    <option value="recall">RECALL</option>
</select>
</form>
<br>
<br>
<br>
<div id="profileIcon">ABOUT ME</div>

这是 Javascript

function selectProfileIcon() {
var ta = document.getElementById("selectProfileIcon");
var div = document.getElementById("profileIcon");
if (ta.value === "aboutme") {
    div.innerHTML = "ABOUT ME";
} else if (ta.value === "aboutus") {
    div.innerHTML = "ABOUT US";
} else if (ta.value === "alert") {
    div.innerHTML = "ALERT";
} else if (ta.value === "services") {
    div.innerHTML = "SERVICES";
} else if (ta.value === "deals") {
    div.innerHTML = "DEALS";
} else if (ta.value === "events") {
    div.innerHTML = "EVENTS";
} else if (ta.value === "hotdeals") {
    div.innerHTML = "HOT DEALS";
} else if (ta.value === "hotpicks") {
    div.innerHTML = "MY PICKS";
} else if (ta.value === "newitems") {
    div.innerHTML = "NEW ITEMS";
} else if (ta.value === "onsale") {
    div.innerHTML = "ON SALE";
} else if (ta.value === "promo") {
    div.innerHTML = "PROMOTION";
} else if (ta.value === "recall") {
    div.innerHTML = "RECALL";
} else {
    div.innerHTML = "No selection";
}
}

这是jsfiddle中的代码:JSFIDDLE LINK

尝试删除表单标签，它会起作用。把它放回去就会禁用它。

如果您有替代代码，我们非常欢迎。我真的很好奇为什么它在表单内不起作用。谢谢!

Answer 1

问题不在于 <form>但事实上你的元素 ID 与你的函数名称相同。重命名 ID 或函数。

HTML

<select id="test" name="taurus" onchange="selectProfileIcon()">

JavaScript

function selectProfileIcon() {
    var ta = document.getElementById("test");
    // etc...
}

JSFiddle