JavaScript点击按钮读取姓名并输出问候功能异常求助

嘿，我发现你的代码里藏了个小问题，导致点击按钮后没法正确显示问候消息～

问题根源 #

你在validName函数里用了innerHTML来获取输入框的内容，但输入框（input）的用户输入内容是存在value属性里的，不是innerHTML。innerHTML是用来读取元素内部的HTML结构的（比如<div>里的文字或标签），对input这类表单元素并不适用。

修改方案 #

只需要把获取输入框内容的那行代码改成用.value即可，另外可以给"hello"后面加个空格，让问候语格式更自然：

function validName() {
    var text1 = "hello "; // 这里加个空格，让问候语更美观
    var text2 = document.getElementById("theName").value; // 把innerHTML替换成value
    document.getElementById("demo").innerHTML = text1 + text2;
}

完整修改后的代码片段（mainC内的script部分） #

<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>

现在你再测试一下：在输入框里输入姓名，点击按钮，就能看到正确的"hello 姓名"问候消息啦～

内容的提问来源于stack exchange，提问作者joe