Question

所以我正在进行一个项目，我正在输入一个数量，我希望它根据输入数量和预定义的成本计算项目的总成本。然后在计算总成本后，它会将其发送回HTML文档。理想情况下它会是动态的。

这是一个带有伪代码的jsfiddle。我似乎无法弄明白，但我相信它会用DOM完成，我也是新手。

任何帮助将不胜感激！我正在做一些更复杂的事情，但我觉得如果我能看到一个更基本的例子，那么我可以弄清楚什么不想为我点击，我可以继续前进。我会继续研究和阅读，如果我没有提供足够的信息，请告诉我！

粗糙的HTML

    <form>
    <input id="quantity" class="qty" type="text" placeholder="quantity" />
    </form>

    <!--display total cost here--> 
    <span>The Cost is: totalcost</span>

粗糙的Javascript

       var cost = 25;

       function(updater) {
          var quantity = document.getElementById('quantity').value();
          var totalcost = (cost * quantity);

          send total back to html document and display as total cost
       }

Answer 1

Demo

使用Javascript：

var cost = 25;
// declaring these globally below helps in further use
var input = document.getElementsByTagName("input")[0],
    span = document.getElementsByTagName("span")[0];

function update(value) {
    var totalcost = (cost * value); // you had redeclared `cost` here in local scope
    span.innerHTML = totalcost; // set value of `totalcost` to `span` using `.innerHTML` property
}

input.oninput =  function(){                // when something in input
    var val = parseFloat(input.value, 10); // get the value from `input` 
    update(val); // update the value of `span`
};

在这里询问您是否需要帮助。

一旦用户按任意键，这将给出反馈，因此非常快。

UPDATE1：

document.getElementsByTagName返回一个HTMLCollection（类似于一个数组），其中包含一组匹配的元素（我们已将其作为"input"和"span"传递）。我在[0]做的是从HTMLCollection（数组）中选择第一个元素，因为我知道form，input，span上只有一个元素页面。

.oninput是用户按下文本框内的键时触发的事件。因此，使用它，我的意思是，在oninput元素上input，触发该函数，该函数将使用input获取input.value的值，并且然后在parse基础10将其发送到update函数。

在更新功能中，我们使用全局totalcost和参数cost计算value。然后使用innerHTML，我们将span的文本设置为totalcost。

进一步阅读：

.innerHTML
.value
document（简单地将其理解为一个树，其中包含页面中的许多元素，例如<html>，<body>以及其所有内容，即它的分支。）

UPDATE2：

请记住，同一页面上可能有许多同名的元素。因此，该方法被正确地称为document.getElement s ByTagName，即获得多个元素。但是，在具有特定ID的页面上只能存在一个元素。因此，按ID获取的方法称为document.getElement （此处为s） ById。现在很容易记住：）

希望有所帮助！

Answer 2

如果你只是寻找阅读输入值和更新的跨度..那么它非常简单..

 function update() {
    var cost = 25;
     var quantity = document.getElementById("quantity").value;
      var totalcost = (cost * parseInt(quantity));

      document.getElementById("ans").innerHTML = "The Cost is:" + totalcost;

    // send total back to html document and display as total cost

  }

DEMO

Answer 3

HTML：

<form>
<input id="quantity" class="qty" type="text" placeholder="quantity" />
    <br>
    <input type="button" value="Calculate" id="calc"/>
</form>

<!--display total cost here--> 
<span>The Cost is: <span id="total">totalcost</span></span>

JS：

document.getElementById('calc').addEventListener('click', updater);

function updater () {
    var cost = 25;
    var quantity = document.getElementById('quantity').value;
    var totalcost = (cost * quantity);

    document.getElementById('total').innerText = totalcost;
}

DEMO

在HTML中输入并使用javascript，处理它并将新变量发送回html

3 个答案:

Demo

UPDATE1：

UPDATE2：