Question

所以我的困境是我不知道如何记录用户输入的内容。（我现在的目标是简单地打印用户在输入框中输入的内容，而不是添加数字）

var x = document.getElementById('textboxone').value;

为什么这不起作用？

<!DOCTYPE html> 

<html> 

<head> 
<link href="cssFiles/ttt.css" rel="stylesheet" type="text/css"></link>
<script Language ="JavaScript">


//create skeleton divs
function createDivs () { 

    var s;


    s = '<div class="simplebox" id="divBody">Bla  3 bla</div>';   
    document.write(s);

}


//create body skeleton
function createBodyDivs (sID) {     
    var s;  
    s = '<div class="smallerbox" id="divInput">';
        s += '<div id="textboxone"><span>Add <input type="text"  ></input></span></div>';
        s += '<div id="textboxtwo"><span>To    <input type="text"  ></input></span></div>';
        s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';



    var oDiv = document.getElementById(sID);

    oDiv.innerHTML = s;
}
//adding the two numbers from input boxes
function addnumbers(form){
var x = document.getElementById('textboxone').value;
alert(x)
}


</script>
</head> 


<body>

<script Language ="JavaScript">
   createDivs();
   createBodyDivs('divBody');
</script>


</body> 



</html>

Answer 1

查看 AngularJS 我的朋友！：）

<强> JSFIddle Demo

<div ng-app="">
    <input type="text" ng-model="data.message" />
     <h1>{{data.message}}</h1>
    <div class="{{data.message}}"></div>
</div>

使用：https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js

Answer 2

我已经快速检查了代码，首先你输入的按钮不会触发addNumbers（窗体），因为输入的onclick没有指向该函数。

然后对于函数本身，document.getElementById('textboxone').value返回undefined，因为您想要的实际值位于<input>而不是<div id="textboxone">

因此，如果您修改了createBodyDivs函数以使输入中的id所在，那么此document.getElementById('textboxone').value实际上将返回正确的值。

function createBodyDivs (sID) {     
    var s;  
    s = '<div class="smallerbox" id="divInput">';
        s += '<div><span>Add <input type="text" id="textboxone" ></input></span></div>';
        s += '<div><span>To    <input type="text" id="textboxtwo" ></input></span></div>';
        s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';



    var oDiv = document.getElementById(sID);

    oDiv.innerHTML = s;
}

对于点击装订，您可以使用以下按钮使其工作：

<input type="button" value = "Answer Generator" OnClick="addnumbers()"></input>

检索用户输入无效？

2 个答案: