如何从输入框中获取一些输入，放入变量，然后使用 HTML 和 Javascript 输出到 span 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"在单击按钮后立即显示为none，我还能从这些输入框中获取信息吗？

Answer 1

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

1. document.getElementById('Container-1'(.style.display='none''Container-1'是一个类，因此无法使用getElementById获取它，请使用document.getElementsByClassName或将其更改为'id'而不是class
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>