我的代码有一个问题,在我的html中有一个带有两个选项的数据列表,当“Azienda”选项被选中时,我想显示名为“Aziende”的div,但当我选择“Privato”时,我不想显示该div,但问题是当我选择“Privato”时,它也显示给我div。有人能帮我吗?
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<div id="aziende" style="display: none">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
let getvalue = document.getElementsByName('lista') [0];
getvalue.addEventListener('input', function() {
if(getvalue !== [0]){
document.getElementById('aziende').style="display: block";
}else{
document.getElementById('aziende').style="display: none";
}
})
</script>
正如注释中提到的,您的if
测试不正确。有关工作解决方案的详细信息,请参阅下面的注释。
null
.hidden {
display: none;
}
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<!-- Use CSS classes instead of inline styles when possible. -->
<div id="aziende" class="hidden">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
const div = document.querySelector("#aziende");
document.querySelector("[name='lista']").addEventListener('input', function() {
// Just check the value of the input
if(this.value === "Azienda"){
div.classList.remove("hidden"); // Show the div
} else {
div.classList.add("hidden"); // Hide the div
}
});
</script>
您的比较(if语句)无效。您将dom元素'getValue'与单个元素为零的数组进行比较。
我认为您应该比较输入元素的值,而不是元素本身。你还把它和数组做了比较?您应该将其与您要查找的值进行比较:
if (getvalue.value !== 'Azienda') {
为了帮助调试类似的事情,在测试之前使用console.log或alert语句显示变量的值是很有用的:
console.log('value of getvalue input element', getvalue.value);
if (getvalue.value