2 回答

TA貢獻2051條經(jīng)驗 獲得超10個贊
提供選項值并為其分配一個 ID,然后<select>您可以在提交按鈕的事件偵聽器中檢查下拉列表的值。
另外,display不是屬性,應該是style="display: none"
document.querySelector("#submitBtn").addEventListener("click", function() {
if (document.querySelector("#genre").value == "impressionism") {
document.querySelector("#right").style.display = "block";
document.querySelector("#wrong").style.display = "none";
} else {
document.querySelector("#wrong").style.display = "block";
document.querySelector("#right").style.display = "none";
}
});
<select id="genre">
<option value="realism">Realism</option>
<option value="impressionism">Impressionism</option>
<option value="post">Post-Impressionism</option>
<option value="default" selected>Choose your answer</option>
</select>
<button id="submitBtn" class="btn btn-primary" type="submit">Submit</button>
<br>
<div id="right" class="alert alert-success" role="alert" style="display: none">
Well done!
</div>
<div id="wrong" class="alert alert-warning" role="alert" style="display: none">
Try again!
</div>

TA貢獻1876條經(jīng)驗 獲得超7個贊
Barmar 的回答完成了工作,但那里有很多無關和不必要的代碼。
您無需設置元素
value
的屬性option
即可訪問 ,option.value
因為默認情況下.value
an 的?option
將是其文本。您不應該為相同的元素一遍又一遍地重新查詢文檔——那只會浪費時間和資源。獲取您需要多次的參考文獻一次。
避免使用內聯(lián)樣式,因為它們會導致您不得不編寫冗余代碼(這不能很好地擴展),并且內聯(lián)樣式在以后需要時最難覆蓋。相反,始終嘗試使用 CSS 類,然后可以使用?
.classList
API輕松添加或刪除它們。您實際上并沒有在任何地方提交數(shù)據(jù),因此您應該使用常規(guī)的
button
,而不是submit
按鈕。您不需要設置兩個單獨的區(qū)域來顯示結果。您可以只擁有一個區(qū)域并動態(tài)設置其中的文本及其樣式。
onclick
您詢問了設置和使用之間的區(qū)別addEventListener
......存在差異?,您應該使用現(xiàn)代的.addEventListener
.
let lstGenre = document.querySelector("#genre");
let result = document.querySelector("#result");
document.querySelector("button[type='button']").addEventListener("click", function() {
? result.classList.remove("hidden");
? if (lstGenre.value == "Impressionism") {
? ? result.textContent = "Correct!";
? ? result.classList.remove("alert-warning");
? ? result.classList.add("alert-success");
? } else {
? ? result.textContent = "Try again!";
? ? result.classList.remove("alert-success");
? ? result.classList.add("alert-warning");
? }
});
.hidden { display:none; }
.alert { border:1px solid black; }
.alert-success { background-color:green;}
.alert-warning { background-color:yellow;}
<select id="genre">
? <option value="" selected>Choose your answer</option>
? <option>Realism</option>
? <option>Impressionism</option>
? <option>Post-Impressionism</option>
</select>
<button class="btn btn-primary" type="button">Submit</button>
<br>
<div id="result" class="alert hidden" role="alert"></div>
添加回答
舉報