第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

選擇特定選項事件處理程序 [javascript]

選擇特定選項事件處理程序 [javascript]

海綿寶寶撒 2023-04-27 16:55:52
我是 javascript 的超級新手。我正在嘗試制作一段代碼,當用戶單擊下拉菜單中的特定項目并單擊提交按鈕時顯示成功警報(以及其他項目的警告警報+提交)這是html部分:        <select>            <option id="realism">Realism</option>            <option id="impressionism">Impressionism</option>            <option id="post">Post-Impressionism</option>            <option id="default"selected>Choose your answer</option>        </select>        <button class="btn btn-primary" type="submit">Submit</button>        <br>        <div id="right"class="alert alert-success" role="alert" display="none">          Well done!        </div>        <div id="wrong"class="alert alert-warning" role="alert">          Try again!        </div>這是我嘗試的 JS:<script>    //defining variables    let right = document.querySelector('#right');    let wrong = document.querySelector('#wrong');    //setting them to display none    right.style.display = 'none';    wrong.style.display = 'none';    if (document.querySelector('#impressionism').onclick && document.querySelector('button').onclick)    {        document.querySelector('#right').style.display = 'block';    }</script>最后兩行不起作用,我不明白為什么。我已經(jīng)嘗試過 onclick、onchange 和其他選項。
查看完整描述

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>


查看完整回答
反對 回復 2023-04-27
?
幕布斯6054654

TA貢獻1876條經(jīng)驗 獲得超7個贊

Barmar 的回答完成了工作,但那里有很多無關和不必要的代碼。

  • 您無需設置元素value的屬性option即可訪問 ,option.value因為默認情況下.valuean 的?option將是其文本。

  • 您不應該為相同的元素一遍又一遍地重新查詢文檔——那只會浪費時間和資源。獲取您需要多次的參考文獻一次。

  • 避免使用內聯(lián)樣式,因為它們會導致您不得不編寫冗余代碼(這不能很好地擴展),并且內聯(lián)樣式在以后需要時最難覆蓋。相反,始終嘗試使用 CSS 類,然后可以使用?.classListAPI輕松添加或刪除它們。

  • 您實際上并沒有在任何地方提交數(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>


查看完整回答
反對 回復 2023-04-27
  • 2 回答
  • 0 關注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號