如何从输入框中获取一些输入，放置在变量中，然后使用HTML和Javascript输出到范围ID？

Question

这是我目前正在使用的代码，似乎没有输出任何内容，因此我不确定我要去哪里哪里：

注意：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”立即不显示任何内容，我是否仍可以从这些输入框中获取信息？

Answer 1

是的，如果在单击按钮后div类“ Container-1”没有显示任何内容，则可以从这些输入框中获取信息。 您的代码不起作用，因为js中存在多个错误（您始终可以通过在任何浏览器上使用inspect元素功能来检查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>

Answer 2

您的代码中有一些错误，您尝试使用document.getElementById()有些问题，但是您传递的是类，而不是Id。 您打开但忘记关闭的SOme标签，我修复了两个错误。 （我建议开始使用针对JavaScript的调试工具，例如浏览器的DevTools F12，以及这样的HTML验证程序https://validator.w3.org/ ）

关于第二个问题，是的，有可能，一个不可见的元素只是不可见，但它仍然存在。

 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.getElementById('slideRangeHours').value); var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan; document.getElementById("ResultsKwhPerDay").innerHTML = KwhPerDay; } function CalcButtonClick(){ document.getElementById('Container-1').style.display='none'; document.getElementById('Calc-Tab-3').style.display='block'; GetTheResults() } 

 <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="CalcButtonClick()" value="Calculate Results"> </div> <div id="Calc-Tab-3"> Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day </div>