Question

所以我有一个脚本块：

<script>
var totalPopulation = 0;

for(xxxxx){
  totalPopulation = totalPopulation + xxx
}
</script>


<tr>
  <input type="text" name="censusPop" value=totalPopulation/>
<tr>

我对javascript仍然非常环保。但有没有办法将脚本块中的变量值分配给HTML元素，如输入类型？我知道代码无法访问。

Answer 1

希望它能帮助您了解javascript的工作原理

<html>
<head>
<script>
    var totalPopulation = 0;

    function addAndShowPopulation(population) {
         totalPopulation = totalPopulation + population;

         var input_tag = getTag('my_input_id');
         input_tag.value = totalPopulation;
    }

    function startAdding() {
         addAndShowPopulation(10);

         setTimeout( function(){startAdding();},1000);
    }

    function getTag(id) {
       return document.getElementById(id);
    }

</script>
</head>
<body onload="startAdding();">

<div>
     <input type="text" id="my_input_id" name="censusPop" value="" placeholder="Total Population"/>

</div>
</body>
</html>

Answer 2

是的，你只需要给输入一个id，例如“id = my_input_id”; 然后，在javascript中，只需写：

$("my_input_id").value=totalPopulation;

这就是ajax的工作方式：找到html元素id并使用javascript值以dinamically方式填充它们。

请注意在JS之前读取的html。如果没有，$（“my_input_id”）将返回Null

Answer 3

更重要的是，你需要做这样的事情：

<tr>
 <td>
  <input type="text" id="censusPop" name="censusPop" value=""/>
 <td>
<tr>
<!-- Other stuff -->
<script>
var totalPopulation = 10;
// or for loop, or whatever here.
var censusText = document.getElementById('censusPop');
censusText.value = totalPopulation;
</script>
</body>

HTML和JavaScript可以互动，但不能直接相互作用。最好的办法是使用<script>标记来设置更新浏览器DOM的代码。通过将<script>标记放在HTML后面，通常位于<body>标记的底部，您可以让浏览器在实际尝试使用它们之前创建元素。

另一个注意事项：<tr>标记应包含<td>标记，它是行与列之间的差异。

Answer 4

如果你需要做多个DOM操作，我建议使用jQuery是正确的方法。

<tr>
    <input id="censusPop" type="text" name"censusPop" value=""/>
</tr>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    // make sure, the code is executed when the DOM is ready
    $(function () {
        // grab the input element by its ID
        var $input = $('#censusPop'),
            totalPopulation = 0;
        // do your population calculations
        totalPopulation = ....;
        // assign the value to the input element
        $input.val(totalPopulation);
    });
</script>

html脚本变量赋值

4 个答案: