如何從輸入框中獲取一些輸入，放置在變量中，然后使用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>