JS输入字段不会从交换机触发

Question

我正在尝试根据所选选项构建动态输入字段。到目前为止它到达开关但只采取第一种情况，无论选项是否被更改..

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％的功能取决于此，因此对我来说这很重要。我希望有人可以告诉我为什么会发生这种情况，谢谢:)

Answer 1

要获取当前选定的选项，您必须首先通过selectedIndex属性获取索引。

从createInputFields更改以下行

var selectedCRUD = what1.value;

至

const selectedCRUD = what1.options[what1.selectedIndex].value;