Question

我只是在学习js，并且遇到了以下无法解决的问题。练习的目的是在单击按钮时读取名称，然后显示一条消息，说明＆＃34;你好＆＃34;

所有功能都包含在mainC div中。

＆＃13;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Sentence Diagrammer</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <h1>Welcome to the Sentence Diagrammer!</h1>
    <h2>You can practice your diagramming skills here.</h2>
    <div id="container">
        <div id="mainL">
            <h1>Left Conatainer</h1>
        </div>

        <div id="mainC">
            <h1>This is the center</h1>
            <p>Please tell us your name</p>

            <p>I am <input id="theName" name="aName" type="text" /></p>
            <button onclick="validName()">Click</button>
            <p id="demo"></p>

            <input id="slide" type="range" min="1" max="10" step="1" onchange="displayPrelimQ(this.value)" />
            <span id="slideValue">1</span>

            <script type="text/javascript">
                function validName() {
                    var text1 = "hello";
                    var text2 = document.getElementById("theName").innerHTML;
                    document.getElementById("demo").innerHTML = text1 + text2;

                }
            </script>

            <script type="text/javascript">
                function displayPrelimQ(val) {
                    document.getElementById("slideValue").innerHTML = val;

                }
            </script>
        </div>

        <div id="mainR">
            <h1>right container</h1>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 1

问题是输入的值不能通过.innerHTML获得，而是通过.value获得。以下作品：

function validName() {
    var text1 = "hello";
    var text2 = document.getElementById("theName").value;
    document.getElementById("demo").innerHTML = text1 + " " + text2;
}

请注意，<input />是一个自封闭标记。（即它没有相应的</input>）。因此，它的内部HTML并没有多大意义，因为它总是空的。

＆＃13;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Sentence Diagrammer</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <h1>Welcome to the Sentence Diagrammer!</h1>
    <h2>You can practice your diagramming skills here.</h2>
    <div id="container">
        <div id="mainL">
            <h1>Left Conatainer</h1>
        </div>

        <div id="mainC">
            <h1>This is the center</h1>
            <p>Please tell us your name</p>

            <p>I am <input id="theName" name="aName" type="text" /></p>
            <button onclick="validName()">Click</button>
            <p id="demo"></p>

            <input id="slide" type="range" min="1" max="10" step="1" onchange="displayPrelimQ(this.value)" />
            <span id="slideValue">1</span>

            <script type="text/javascript">
                function validName() {
                    var text1 = "hello";
                    var text2 = document.getElementById("theName").value;
                    document.getElementById("demo").innerHTML = text1 + " " + text2;

                }
            </script>

            <script type="text/javascript">
                function displayPrelimQ(val) {
                    document.getElementById("slideValue").innerHTML = val;

                }
            </script>
        </div>

        <div id="mainR">
            <h1>right container</h1>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 2

由于#theName是输入字段，如果您想获取输入的值，则必须访问其值属性。对于input和textarea，要获取用户输入，请使用.value - 对于大多数其他元素，要获取其包含的HTML，请使用innerHTML（或者，如果只是文字，textContent）。

＆＃13;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Sentence Diagrammer</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <h1>Welcome to the Sentence Diagrammer!</h1>
    <h2>You can practice your diagramming skills here.</h2>
    <div id="container">
        <div id="mainL">
            <h1>Left Conatainer</h1>
        </div>

        <div id="mainC">
            <h1>This is the center</h1>
            <p>Please tell us your name</p>

            <p>I am <input id="theName" name="aName" type="text" /></p>
            <button onclick="validName()">Click</button>
            <p id="demo"></p>

            <input id="slide" type="range" min="1" max="10" step="1" onchange="displayPrelimQ(this.value)" />
            <span id="slideValue">1</span>

            <script type="text/javascript">
                function validName() {
                    var text1 = "hello";
                    var text2 = document.getElementById("theName").value;
                    document.getElementById("demo").innerHTML = text1 + ' ' + text2;

                }
            </script>

            <script type="text/javascript">
                function displayPrelimQ(val) {
                    document.getElementById("slideValue").innerHTML = val;

                }
            </script>
        </div>

        <div id="mainR">
            <h1>right container</h1>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 3

尝试更改此行：

var text2 = document.getElementById("theName").innerHTML;

到这个

var text2 = document.getElementById("theName").value;

Answer 4

你的问题是由于这一行 var text2 = document.getElementById("theName").innerHTML;

通过将上述行修改为

，您可以获得所需的结果

var text2 = document.getElementById("theName").value;

有什么区别？ innerHTML读取html标记之间的内容。对于HTML中的empty elements，没有结束标记，因此标记之间没有内容。 input是HTML中的空元素，因此您需要阅读其value。

阅读和写一个名字的问题

4 个答案: