我正在尝试根据所选选项构建动态输入字段。 到目前为止,无论是否更改了选项,它都可以到达开关,但仅采用第一种情况。
const crud = ["Create", "Update"]
const whatCRUD = ["Company", "Person", "Hobby"];
var choice = document.getElementById("selectCRUD");
var what1 = document.getElementById("createSel");
var input2 = document.getElementById("input2")
var btnCU = document.getElementById("btnCU");
const url = "https://dueinator.dk/CA2/api/";
choice.innerHTML = choicesToHTML(crud);
what1.innerHTML = choicesToHTML(whatCRUD);
what1.addEventListener("change", createInputFields);
setInputField2();
btnCU = addEventListener("click",postMethod);
function choicesToHTML(choices) {
return choices.map(choice => "<option value=\"" + choice + "\">" + choice + "</option>");
}
function setInputField2() {
input2.innerHTML = createInputFields();
}
function createInputFields() {
var selectedCRUD = what1.value;
console.log(selectedCRUD);
var inputs = "";
switch (selectedCRUD) {
case "Company":
inputs += "<input id=\"cName\" type=\"text\" placeholder=\"Company name..\">";
inputs += "<input id=\"cDesc\" type=\"text\" placeholder=\"Company description..\">";
inputs += "<input id=\"cCVR\" type=\"number\" value=\"70000601\">";
inputs += "<input id=\"cNumOfEmp\" type=\"number\" placeholder=\"Amount of employees..\">";
inputs += "<input id=\"cMarketValue\" type=\"number\" placeholder=\"Market value..\">";
inputs += "<input id=\"cEmail\" type=\"text\" placeholder=\"Email\">";
inputs += "<input id=\"cPhone\" type=\"number\" placeholder=\"Phone number\">";
inputs += "<input id=\"cAddress\" type=\"text\" placeholder=\"Address\">";
return inputs;
case "Person":
inputs += "P<input id=\"pFName\" type=\"text\"> <br>";
inputs += "<input id=\"pLName\" type=\"text\"> <br>";
inputs += "<input id=\"pHobby\" type=\"text\"> <br>";
inputs += "<input id=\"pEmail\" type=\"text\"> <br>";
inputs += "<input id=\"pPhone\" type=\"number\"> <br>";
inputs += "<input id=\"pAdress\" type=\"text\"> <br>";
return inputs;
case "Hobby":
inputs += "H<input id=\"hName\" type=\"text\" placeholder=\"Write the name here..\">";
inputs += "<input id=\"hDesc\" type=\"text\"> placeholder=\"Write the desc here..\"";
return inputs;
default:
alert("Something went wrong, please try again or reload page (F5)");
return "<input type=\"text\" disabled=\"disabled\">";
}
}
function postMethod() {
var data = createData;
fetch(url + what1.value, {
method: 'POST',
headers: { 'Content-Type': 'application/json; charset=utf-8' },
body: JSON.stringify(data) // body data type must match "Content-Type" header
}).then((res) => res.json()).then((data) => {
console.log('data from post', data);
alert("Entity has been updated");
}).catch(error => console.log(error));
}
function createData() {
var selectedEntity = what1.value;
switch(selectedEntity) {
case "Hobby":
var hName = document.getElementById("hName");
var hDesc = document.getElementById("hDesc");
var hData = {hName, hDesc}
return hData;
case "Company":
var cName = document.getElementById("cName");
var cDesc = document.getElementById("cDesc");
var cCVR = document.getElementById("cCVR");
var cNumOfEmp = document.getElementById("cNumOfEmp");
var cMarketValue = document.getElementById("cMarketValue");
var cEmail = document.getElementById("cEmail");
var cPhone = document.getElementById("cPhone");
var cAddress = document.getElementById("cAddress");
var cData = {cName, cDesc, cCVR, cNumOfEmp, cMarketValue, cEmail, cPhone, cAddress};
return cData;
case "Person":
var pFName = document.getElementById("pFName");
var pLName = document.getElementById("pLName");
var pHobby = document.getElementById("pHobby");
var pEmail = document.getElementById("pEmail");
var pPhone = document.getElementById("pPhone");
var pAddress = document.getElementById("pAddress");
var pData = {pFName, pLName, pHobby, pEmail, pPhone, pAddress}
return pData;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h6>C(R)UD</h6>
<label>Choose what you wanna do</label>
<select id="selectCRUD" class="mdb-select md-form"></select>
<labal>Choose what you want to mod</labal>
<select id="createSel" class="mdb-select md-form"></select>
<button id="btnCU" type="button">Create/Update entity</button>
<span id="input2"></span>
<script src="bundle.js"></script>
</body>
</html>
使这部分正常工作对我来说很重要,因为它的80%的功能取决于此。 我希望有人能告诉我发生这种情况的原因,谢谢:)
答案 0 :(得分:1)
要获取当前选定的选项,您必须首先通过selectedIndex
属性获取索引。
从createInputFields
var selectedCRUD = what1.value;
到
const selectedCRUD = what1.options[what1.selectedIndex].value;