在 java 腳本的下拉列表中選擇選項時添加文本區域

Question

 function showInsertQuest(){ var x = document.getElementById("one"); if (x.style.display === "none"){ x.style.display = "block"; } else { x.style.display = "block"; } } const target = document.querySelector("#second"); const displayWhenSelected = (source, value, target) => { const selectedIndex = source.selectedIndex; const isSelected = source[selectedIndex].value === value; target.classList[isSelected? "add": "remove" ]("show"); }; if(source= document.querySelector("#location")) source.addEventListener("change", (evt) => displayWhenSelected(source, "loc5", target) );

 body { align-items: center; } #container { border: 4px solid; position: auto; height: 650; width: 700px; }.main { border-bottom: solid; margin-bottom: 0px; } h2 { margin-left: 10px; margin-bottom: 1%; color: darkcyan; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; } #bottom { border-top: 0.7solid; margin-top: 0px; } button { margin-left: 10px; margin-right: 10px; border-radius: 4px; background-color: darkcyan; color: white; height: 35px; width: 80px; margin-top: -25px; } /* Insert Button */.insert-btn { margin-left: 0px; margin-top: 480px; color: grey; margin-bottom: 0px; padding-left: 510.53px; border-top: none; height: 40px; font-weight: 200; font-size: 1.05rem; }.insert-btn:hover { background: grey; box-shadow: var(--shadow); color: white; }.insert-btn:active { background: grey; color: black; border: transparent; } #one { width: 700px; position: fixed; margin-top: 10px; display: none; } #one input { width: 0px; border: 1px solid; border-radius: 5px; display: inline; padding-right: 500px; padding-left: 7px; padding-top: 5px; padding-bottom: 5px; color: grey; } #one #Multiplechoice { margin-right: 0px; display: inline; border: none; position: fixed; height: 19px; } i { padding-left: 12px; padding-right: 5px; padding-top: 1px; color: grey; } #one.on { padding-left: 9px; } #one #second { margin-left: 22px; margin-top: 5px; display: none; } #one #second.show { display: block; }

 <div id="container"> <div class="main"> <h2>ADD NEW CALL</h2> </div> <section class="insert-quest" id="insertquestone"> <div id="one" > <div class="on"> 1 <input type="text"/><i class="fa fa-adn" aria-hidden="true"></i> <!-- DROPDOWN --> <select id="location" name="drop"> <option value="Select">Select</option> <option value="loc5" >Multi-line text</option> <option value="loc6" >Single choice</option> <option value="loc7">Multi choice</option> </select> </div> <!-- TEXTAREA --> <textarea name="term" id="second" cols="50" rows="3"></textarea> </div> </section> <div id="content"> <!-- Insert Quest Button --> <input type="button" value="+ADD NEW QUESTION" class="insert-btn" id="insertbtn" onclick="showInsertQuest()"/> </div> <div id="bottom"> <h3><button>SAVE</button> cancel </h3> </div> </div>

更新：我修改了您問題中的代碼以提高可讀性@Adam P。

試圖在從下拉列表中選擇多行文本時獲得一個文本區域，類似地在選擇單選時在問題下方添加 1 個文本框，在選擇單選時在問題下方添加 5 個文本框...

出現無法讀取 null 的屬性“addEventListener”的錯誤

Answer 1

要使 textarea 可見，您必須做幾件事：

在 JS 部分，改變

if(source= document.querySelector("#location"))

至

const source = document.querySelector("#location");

這種變化是不言自明的，您需要在附加事件監聽器時定義節點。

在 CSS 更改：

#one #second {
  margin-left: 22px;
  margin-top: 5px;
  display: none;
}
#one #second .show {
  display: block;
}

至

#second {
  margin-left: 22px;
  margin-top: 5px;
  display: none;
}
#second.show {
  display: block;
}

你不需要#one 選擇器，一個id選擇器就足夠了。 Also, when you add a class ( .show ) to an element that already has id defined, you need to write that class without a space between id name and class name in CSS.

編輯：您可能正在<head>標記中加載腳本。 這樣，腳本無法附加 eventListener，因為 DOM 元素尚不可用。 要解決此問題並刪除Cannot read property 'addEventListener' of null ，您需要在</body>結束之前加載腳本，如下所示：

<html>
    <head>
        <style></style>
    </head>
    <body>
        ...content of your web page
        <script></script>
    </body>
</html>

在 java 腳本的下拉列表中選擇選項時添加文本區域

問題描述

1 個解決方案

解決方案1
0 已采納 2020-12-22 10:06:32

在 java 腳本的下拉列表中選擇選項時添加文本區域

問題描述

1 個解決方案

解決方案1 0 已采納 2020-12-22 10:06:32

解決方案1
0 已采納 2020-12-22 10:06:32