在 HTML 中输入并使用 javascript，对其进行处理并将新变量发送回 html答案

【问题标题】：Take an input in HTML and using javascript, process it and send the new variable back to html在 HTML 中输入并使用 javascript，对其进行处理并将新变量发送回 html
【发布时间】：2014-03-18 06:21:33
【问题描述】：

http://jsfiddle.net/sSwvq/3/

所以我正在做一个项目，我正在输入一个数量，我希望它根据输入的数量和预定义的成本计算项目的总成本。然后在计算总成本后，它会将其发送回 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
       }

【问题讨论】：

您在这方面遇到了哪些具体问题？从输入字段中获取值，或使用计算结果更新 DOM？
这两个都是非常基本的 Javascript 操作，应该在任何教程中介绍。
请至少尝试一下javascript
stackoverflow.com/questions/11563638/…
我最大的麻烦是正确调用输入值，然后将其发送回html页面。我将通过更新编辑将我尝试的 Javascript 扔到页面上：sabithpocker 非常适合我需要的部分内容！谢谢你，你的搜索能力比我强>.

标签： javascript html dom dynamic input

【解决方案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`
};

在这里询问您是否需要帮助来理解任何内容。

这将在用户按下任何键时立即给出反馈，因此非常快。

更新1：

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

.oninput 是一个在用户按下文本框内的键时触发的事件。所以，使用它，我的意思是说，oninput 在input 元素上，触发该函数，它将使用input.value 和parse 获取input 的值，然后在基数10 和发送到update函数。

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

进一步阅读：

.innerHTML
.value
document（将其简单理解为一棵树，其中包含页面中的许多元素，例如 <html>、<body> 和所有内容，它们都是它的分支。）

更新2：

请记住，同一页面上可以有许多同名的元素。因此该方法正确地称为document.getElementsByTagName，即获取多个元素。但是，具有特定 ID 的页面上只能存在一个元素。因此通过 ID 获取的方法称为document.getElement（这里没有s）ById。现在很容易记住:)

希望有帮助！

【讨论】：

是 input.oninput 是什么在按下一个键后立即给出反馈？ document.getElementsByTagName 也发送和接收值吗？我认为这是在理解 DOM javascript 方面最让我困惑的地方。非常感谢您的回复！通过阅读这些论坛，我了解了很多，但有时它在基础知识方面超出了我的想象！
@Soccham 我正在添加更多解释。
@Soccham Dome。希望它有所帮助:)
jsfiddle.net/sSwvq/23 最后一个问题，如果可以的话！我试图修改那里的代码以接受 ID，但它似乎破坏了功能
@Soccham 它应该是document.getElementById。查看我的答案更新。

【解决方案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

【讨论】：

【解决方案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

【讨论】：

这是完美的，如果你不介意我问是什么使这条线 * document.getElementById('total').innerText = totalcost; * 发回html文件？由于 getElementById 似乎接收和发送输入，我认为这是一件让我感到困惑的大事。
document 是一个保存整个 html 页面的树状数据结构。此数据结构可从 Javascript 访问。因此，当您执行上述命令时，它将获取带有id 的元素为total，并将其innerText 或其文本设置为totalcost。浏览器使用相同的数据结构向您显示页面，因此当您更改数据结构（又名DOM）时，您会在页面中反映出来。显然，您应该按照@Barmar 的建议阅读有关DOM 和JS 的一些教程
您确实需要阅读书籍并对 Javascript 和 DOM 有基本的了解。 getElementById 只是找到一个 HTML 元素，它不发送或接收任何东西。 .value 访问输入元素的值，.innerText 和 .innerHTML 访问普通 HTML 元素的内容。
是的，我确实需要！ Javascript 是我用得最少的语言，我无法通过我厚厚的头骨得到这种模型类型。非常感谢两位的回复！在这篇文章的 15 分钟里，我已经比我试图解释 w3c 的教程所花费的一个半小时更了解它的用途。