javascript - While building a mini app using JavaScript,HTML and CSS. I am getting 'undefined' value for the selected dropdown
问题描述
I was trying to build an interface where I can print the values that the user enters into a table and then it keeps updating. The basic functionality is working fine but the value from the drop down (both Test Type and Product Type) is showing as 'Undefined' when i make an entry in the table. Can anyone please help me fix the issue.
var row=1
var entry=document.getElementById("entry");
entry.addEventListener("click",displayDetails);
function displayDetails(){
var name =document.getElementById("name").value;
var email= document.getElementById("email").value;
var TestType= document.getElementsByName("TP").value;
var ProductType= document.getElementById("product_type").value;
var IP= document.getElementById("txta_address").value;
var Inputs= document.getElementById("num_inputs").value;
if(name =='' || email == '' || TestType=='' || ProductType=='' || IP == ''|| Inputs == ''){
alert("Please fill all the fields!");
return;
}
var display = document.getElementById("display");
var newRow = display.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
var cell5 = newRow.insertCell(4);
var cell6 = newRow.insertCell(5);
cell1.innerHTML = name;
cell2.innerHTML = email;
cell3.innerHTML = TestType;
cell4.innerHTML = ProductType;
cell5.innerHTML = IP;
cell6.innerHTML = Inputs;
}
* {
margin: 1;
padding: 1;
}
html{
background : radial-gradient(rgba(179,255,255,0.5),rgba(255,255,255,0.5))
}
#nameDiv{
margin-top: 50px;
}
.input{
font-size: 25px;
color: #004d00;
font-style: initial;
font-family: 'Times New Roman', Times, serif;
margin: 5px;
}
#entry{
width : 150px;
height: 60px;
font-size: 25px;
font-family: 'Times New Roman', Times, serif;
background-color: #05193d;
color: whitesmoke;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5);
margin-top: 10px;
}
table{
border-collapse: collapse;
border: #05193d;
width: 70%;
margin: 50px auto;
background-color: burlywood;
}
table,th,td{
border: 5px solid black;
padding: 30px;
}
th{
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
font-weight: 700;
color: #004d00;
}
td{
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
color: crimson;
font-weight: 700;
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Web Application</title>
</head>
<body>
<h2>User Input Form</h2>
<h4>Enter your details first</h4>
<div id="container">
<div id="nameDiv" class="input"><strong>Enter your name: </strong><input id="name" type="text" placeholder="First Last" required/></div>
<br>
<br>
<div class="input"><strong>Enter your Email: </strong><input id="email" type="text" placeholder="YOURNAME@DOMAIN.COM" required/></div>
<br>
<br>
<div class="input"><label for="Test Types" id="tst_type"><strong>Test Type: </strong></label>
<select size="1" id="tst_type" name="TP" >
<option value=""> - Select - </option>
<option value="Manufacturing">Manufacturing</option>
<option value="Channel">Channel</option>
<option value="DVT" >DVT</option></select>
</div>
<br>
<br>
<div class="input"><label for="Product Types" id="product_type"><strong>Product Type: </strong></label>
<select size="1" id="product_type" name="PT">
<option value=""> - Select - </option>
<option value="RAID">RAID</option>
<option value="RBOD">RBOD</option>
<option value="EBOD">EBOD</option>
<option value="iSCSI">iSCSI</option></select></div>
<br>
<br>
<div class="input"><strong>IP Address: </strong><input id="txta_address" type="text" placeholder="10.10.10.10" required/></div>
<br>
<br>
<div class="input"><label for="No_of_Inputs"><strong>Number of Chasis Input: </strong></label><input id="num_inputs" type="text" placeholder="1" required/></div>
<br>
<br>
<button id="entry">Submit Information</button>
</div>
<script src="main.js"></script>
<table id="display">
<tr>
<th>Name</th>
<th>Email</th>
<th>Test Type</th>
<th>Product Type</th>
<th>IP Address</th>
<th>Chasis Inputs</th>
</tr>
</table>
</body>
</html>
解决方案
有两个单独的错误。
第一个var TestType= document.getElementsByName("TP").value;
和第二个副本id
getElementsByName
返回一个集合,因此您必须使用 like var TestType = document.getElementsByName("TP")[0].value;
。
其次两者都有相同的div
。所以代码正在考虑并赋予价值select
id
div
undefined
var row = 1
var entry = document.getElementById("entry");
entry.addEventListener("click", displayDetails);
function displayDetails() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var TestType = document.getElementsByName("TP")[0].value;
var ProductType = document.getElementById("product_type_select").value;
var IP = document.getElementById("txta_address").value;
var Inputs = document.getElementById("num_inputs").value;
if (name == '' || email == '' || TestType == '' || ProductType == '' || IP == '' || Inputs == '') {
alert("Please fill all the fields!");
return;
}
var display = document.getElementById("display");
var newRow = display.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
var cell5 = newRow.insertCell(4);
var cell6 = newRow.insertCell(5);
cell1.innerHTML = name;
cell2.innerHTML = email;
cell3.innerHTML = TestType;
cell4.innerHTML = ProductType;
cell5.innerHTML = IP;
cell6.innerHTML = Inputs;
}
* {
margin: 1;
padding: 1;
}
html {
background: radial-gradient(rgba(179, 255, 255, 0.5), rgba(255, 255, 255, 0.5))
}
#nameDiv {
margin-top: 50px;
}
.input {
font-size: 25px;
color: #004d00;
font-style: initial;
font-family: 'Times New Roman', Times, serif;
margin: 5px;
}
#entry {
width: 150px;
height: 60px;
font-size: 25px;
font-family: 'Times New Roman', Times, serif;
background-color: #05193d;
color: whitesmoke;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
margin-top: 10px;
}
table {
border-collapse: collapse;
border: #05193d;
width: 70%;
margin: 50px auto;
background-color: burlywood;
}
table,
th,
td {
border: 5px solid black;
padding: 30px;
}
th {
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
font-weight: 700;
color: #004d00;
}
td {
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
color: crimson;
font-weight: 700;
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
}
<h2>User Input Form</h2>
<h4>Enter your details first</h4>
<div id="container">
<div id="nameDiv" class="input"><strong>Enter your name: </strong><input id="name" type="text" placeholder="First Last" required/></div>
<br>
<br>
<div class="input"><strong>Enter your Email: </strong><input id="email" type="text" placeholder="YOURNAME@DOMAIN.COM" required/></div>
<br>
<br>
<div class="input"><label for="Test Types" id="tst_type"><strong>Test Type: </strong></label>
<select size="1" id="tst_type" name="TP">
<option value=""> - Select - </option>
<option value="Manufacturing">Manufacturing</option>
<option value="Channel">Channel</option>
<option value="DVT">DVT</option>
</select>
</div>
<br>
<br>
<div class="input"><label for="Product Types" id="product_type"><strong>Product Type: </strong></label>
<select size="1" id="product_type_select" name="PT">
<option value=""> - Select - </option>
<option value="RAID">RAID</option>
<option value="RBOD">RBOD</option>
<option value="EBOD">EBOD</option>
<option value="iSCSI">iSCSI</option>
</select>
</div>
<br>
<br>
<div class="input"><strong>IP Address: </strong><input id="txta_address" type="text" placeholder="10.10.10.10" required/></div>
<br>
<br>
<div class="input"><label for="No_of_Inputs"><strong>Number of Chasis Input: </strong></label><input id="num_inputs" type="text" placeholder="1" required/></div>
<br>
<br>
<button id="entry">Submit Information</button>
</div>
<script src="main.js"></script>
<table id="display">
<tr>
<th>Name</th>
<th>Email</th>
<th>Test Type</th>
<th>Product Type</th>
<th>IP Address</th>
<th>Chasis Inputs</th>
</tr>
</table>
推荐阅读
- highcharts - 为 scatter3d 中的每个点指定颜色
- scala - 如何在理解中处理失败的未来
- javascript - 带有选项 MaterialUI 的按钮
- amazon-web-services - 如何获取存储在 aws 存储桶中的对象的存储类
- java - 使用文件名从类路径或资源中查找文件并获取该文件的路径
- kubernetes - 如何通过命令行传递 pod 的数量
- quickfix - 在 QuickFix 中,RelatedSymGroup 设置的顺序是什么
- iframe - iframe 未加载提供的 URL
- android - 从 Koin 模块调用活动
- docker - 无法像在 Windows 控制台上运行一样在 bat 文件中运行命令