时间戳

首页 > 解决方案 > 如何从输入框中获取一些输入，放入变量中，然后使用 HTML 和 Javascript 输出到 span id？

javascript - 如何从输入框中获取一些输入，放入变量中，然后使用 HTML 和 Javascript 输出到 span id？

问题描述

这是我目前使用的代码，它似乎没有输出任何东西，所以我不确定我哪里出错了：

注意：div“Calc-Tab-3”一开始是隐藏的

代码

function myHoursPumpIsRunFunction() {
    var ThisIsMyHoursRun = document.getElementById("slideRangeHours").value;
    document.getElementById("myHoursRan").innerHTML = ThisIsMyHoursRun;
}

function GetTheResults() {
    var Volts = parseInt(document.getElementById('Volts').value);
    var Amps = parseInt(document.getElementById('Amps').value);
    var HoursPumpIsRan = parseInt(document.getElementsById('slideInputValueHours').value);
    var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan;
    document.getElementById("ResultsKwhPerDay").innerHTML = KwhPerDay;
}
<div class="Container-1">
    Volts: <input type="number" class="tabinput" id="Volts" min="1">    
    Amps: <input type="number" class="tabinput" id="Amps" min="1">
    <span>How many hours do you run your pump for:&nbsp;</span>
    <span class="slideOutputValueHours" id="myHoursRan">7</span> Hours
    
    <input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction()">

    <input type="button" class="CalcButtons" onclick="document.getElementById('Container-1').style.display='none';document.getElementById('Calc-Tab-3').style.display='block';GetTheResults()" value="Calculate Results">
    
    <div id="Calc-Tab-3">
    Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day
    </div>
</div>

我的第二个问题是，如果 div 类“Container-1”在单击按钮后立即显示为 none，我还能从这些输入框中获取信息吗？

标签： javascripthtmlparsingvariables

解决方案

是的，如果 div 类“Container-1”在单击按钮后立即显示为 none，您可以从这些输入框中获取信息。您的代码不起作用，因为 js 中有多个错误（您始终可以通过在任何浏览器上使用检查元素功能来检查 js 错误）。错误：

  1. document.getElementById('Container-1').style.display='none'; 'Container-1' 是一个类，因此您无法通过使用 getElementById 来获取它，要么使用 document.getElementsByClassName，要么将其更改为 'id' 而不是类。
  2. var HoursPumpIsRan = parseInt(document.getElementsById('slideInputValueHours').value); 与错误 1 ​​相同，“slideInputValueHours”是一个类，并且函数名称是“getElementById”而不是“getElementsById”。

这是工作代码链接

Javascript：

function myHoursPumpIsRunFunction() {
    var ThisIsMyHoursRun = document.getElementById("slideRangeHours").value;
    document.getElementById("myHoursRan").innerHTML = ThisIsMyHoursRun;
}

function GetTheResults() {
    document.getElementById('Container-1').style.display='none';
    document.getElementById('Calc-Tab-3').style.display='block';

    var Volts = parseInt(document.getElementById('Volts').value);
    var Amps = parseInt(document.getElementById('Amps').value);
    var HoursPumpIsRan = 
    parseInt(document.getElementById('slideRangeHours').value);
    var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan;
    document.getElementById("ResultsKwhPerDay").innerHTML = KwhPerDay;
}

HTML：

 <div id="Container-1">
  Volts: <input type="number" class="tabinput" id="Volts" min="1"> Amps: <input type="number" class="tabinput" id="Amps" min="1">
   <span>How many hours do you run your pump for:&nbsp;</span><span class="slideOutputValueHours" id="myHoursRan">7</span> Hours
   <input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction();">
   <input type="button" class="CalcButtons" onclick="GetTheResults();" value="Calculate Results">
   </div>
   <div id="Calc-Tab-3" style="display:none;">
    Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day
   </div>

推荐阅读