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.
尝试获取从下拉列表中选择多行文本的文本区域SIMAILABRLY关于选择单选题在问题下方添加1个文本框在选择单选项时，在问题下方添加5个文本框。。。
获取错误"无法读取null 的属性"addEventListener">
要使文本区域可见，您必须做以下几件事：
在JS部分，更改
if(source= document.querySelector("#location"))
至
const source = document.querySelector("#location");
这个更改非常不言自明，您需要在附加eventListener时定义节点。
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;
}
您不需要#1选择器，一个id选择器就足够了。此外，当您将一个类(.show(添加到已经定义了id的元素中时，您需要在CSS中编写id名称和类名之间没有空格的类。
EDIT：您可能正在<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>