document.getElementById().innerHTML 不起作用，但我可以将该元素的值记录到控制台。发生什么事了？

问题描述 投票：0回答：1

我目前正在重写一个小项目，其中一个澳大利亚慈善组织根据一系列问题进行评分。以前，HTML 的格式很差，没有表单标签，没有缩进等，所以我决定根据我在大学学到的 HTML 表单知识重新编写它。但是，我之前使用的将空白 HTML 占位符段落更改为文本（解释每个问题的分数以及总分）的方法不再适用于新的 HTML 和 JS。 name 和 state 的值都会记录到控制台，但 HTML 不会按预期更改。这是代码：

HTML：


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Organisation Score Calculator</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <script type="text/javascript" src="script1.js"></script>
        <h1>Organisation Score Calculator</h1>
        <form action="">
            <h4>Input the name of the charity.</h4>
            <input type="text" id="nameOfOrganisation">
            <h4>Which state/territory does this organisation service?</h4>
            <select name="state" id="state">
                <option value="VIC">VIC</option>
                <option value="NSW">NSW</option>
                <option value="ACT">ACT</option>
                <option value="QLD">QLD</option>
                <option value="NT">NT</option>
                <option value="TAS">TAS</option>
                <option value="WA">WA</option>
            </select>
            <br>
            <br>
            <button onclick="main()">Get score!</button>
            <p id="namePlaceholder"></p>
            <p id="statePlaceholder"></p>
        </form>
    </body>
    </html>

JS：


function getNameOfOrganisation () {
    let organisation = document.getElementById("nameOfOrganisation").value;
    return organisation;
}

function getStateOfOrganisation () {
    let state = document.getElementById("state").value;
    if (state === "VIC") {
        let points = 1;
        return points;
    } else if (state === "NSW") {
        let points = 0.5;
        return points;
    } else {
        let points = 0;
        return points;
    }
}

function main () {
    let name = getNameOfOrganisation();
    document.getElementById("namePlaceholder").innerHTML = "Name of organisation: " + name;
    console.log(name);
    let state = getStateOfOrganisation();
    document.getElementById("statePlaceholder").innerHTML = "Points scored for state/territory: " + state;
    console.log(state);
}

我认为这是一个在 HTML 之前加载 Javascript 的问题，或者类似的问题（请原谅我的任何语言错误），因为我在这个网站上看到其他人几乎通过更改我的问题完全解决了他们的问题HTML 中脚本标记的位置。这没有帮助。

javascript html forms dom
1个回答
0
投票

将您的 

getNameOfOrganisation
功能绑定到例如
onblur
当用户离开字段时设置组织名称的事件。

function getNameOfOrganisation() {
    let name = document.getElementById("nameOfOrganisation").value;
    if(name) {
      document.getElementById("namePlaceholder").innerHTML = "Name of organisation: " + name;
    }    
}

function getStateOfOrganisation () {
    let state = document.getElementById("state").value;
        
    if (state === "VIC") {
        let points = 1;
        return points;
    } else if (state === "NSW") {
        let points = 0.5;
        return points;
    } else {
        let points = 0;
        return points;
    }
}

function main () {
    let name = getNameOfOrganisation();
    console.log('name', name)
    document.getElementById("namePlaceholder").innerHTML = "Name of organisation: " + name;
    
    let state = getStateOfOrganisation();
    document.getElementById("statePlaceholder").innerHTML = "Points scored for state/territory: " + state;
    
}

main();
 <h1>Organisation Score Calculator</h1>
        <form action="">
            <h4>Input the name of the charity.</h4>
            <input type="text" id="nameOfOrganisation" onblur="getNameOfOrganisation()">
            <h4>Which state/territory does this organisation service?</h4>
            <select name="state" id="state">
                <option value="VIC">VIC</option>
                <option value="NSW">NSW</option>
                <option value="ACT">ACT</option>
                <option value="QLD">QLD</option>
                <option value="NT">NT</option>
                <option value="TAS">TAS</option>
                <option value="WA">WA</option>
            </select>
            <br>
            <br>
            <button onclick="main()">Get score!</button>
            <p id="namePlaceholder"></p>
            <p id="statePlaceholder"></p>
        </form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.