读和写一个名字的问题
读和写一个名字的问题
提问于 2018-05-16 02:43:45
我只是在学习js，有一个我似乎无法解决的问题。该练习的目标是在单击按钮时读取名称，然后显示一条"hello“的消息。
所有函数都包含在mainC div中。
<!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>
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-05-16 02:47:01
问题是输入的值不是通过.innerHTML获得的，而是通过.value获得的。以下工作：
function validName() {
var text1 = "hello";
var text2 = document.getElementById("theName").value;
document.getElementById("demo").innerHTML = text1 + " " + text2;
}注意，<input />是一个自关闭标记。(即它没有相应的</input>)。因此，它的内部HTML没有多大意义，因为它总是空的。
<!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>
Stack Overflow用户
发布于 2018-05-16 02:47:28
因为#theName是一个输入字段，所以如果您想获得输入值，就必须访问它的value属性。对于input和textarea，要获取用户输入，使用.value -对于大多数其他元素，要获得它们包含的HTML，使用innerHTML (或者，如果只是文本，使用textContent)。
<!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>
Stack Overflow用户
发布于 2018-05-16 02:48:29
试着改变这一行：
var text2 = document.getElementById("theName").innerHTML;到这个
var text2 = document.getElementById("theName").value;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50361734
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号