為什么我的 Javascript 代碼中出現 [object HTMLInputElement]？

Question

我正在做一個我無法理解的項目。 Javascript 相當新，所以並不奇怪。 我正在嘗試的是讓用戶在 html 文檔中輸入他們的名字，讓我的 8822996504788 文件將該名稱記錄到一個名為 userName 的變量中，然后讓出現在以下問題中的下一個 label 將他們的名字添加到 label 以進行自定義. 我的 javascript 源文件存儲在與 index.html 相同的文件夾中，並在 html 文件的頭部鏈接為：

為了顯示初始化，我已經包含了超出絕對必要的內容。 在點擊按鈕之前，我的第二個 label 看起來像：

你和誰一起冒險？ （選擇所有適用項）單身夫婦家庭小團體大團體

我點擊后顯示：

感謝 [對象 HTMLInputElement]。 你要和誰一起去冒險？

第一次使用stackoverflow，所以如果我做錯了請告訴我。

HTML科

<!-- Creates app container-->
    <div class="appContainer">
      <br />
      <!-- 1st section. Gather name -->
      <div class="gatherName">
        <label id="lblName"> What's your name?</label>
        <input type="text" id="inputName" />
        <button type="button" id="nameBtn" onclick="getGroupSize()">
          Next
        </button>

        <br />
        <br />
      </div>

Javascript 文件

// Declarations
var lbl;
let userName;
var groupSizeSolo;
var groupSizeCouple;
var groupSizeFamily;
var groupSizeSmall;
var groupSizeLarge;

//Functions

function getUserName(params) {}

function getGroupSize() {
  let lbl = document.getElementById("lblGroupSize");
  let userName = document.getElementById("inputName");

  //Assign new label based off user input
  lbl.innerHTML =
    "Thanks " + userName + ". who are you going on an adventure with?";
}

Answer 1

當您使用getElementById時，它會返回您正在獲取的HTMLInputElement 。

元素 object 描述與指定 ID 匹配的 DOM 元素 object，如果在文檔中未找到匹配元素，則為 null。 -MDN

所以你需要價值

let userName = document.getElementById("inputName").value;
lbl.innerHTML =
    "Thanks " + userName + ". who are you going on an adventure with?";

要么

let userName = document.getElementById("inputName");
lbl.innerHTML =
    "Thanks " + userName.value + ". who are you going on an adventure with?";

 var lbl; let userName; var groupSizeSolo; var groupSizeCouple; var groupSizeFamily; var groupSizeSmall; var groupSizeLarge; //Functions function getUserName(params) {} function getGroupSize() { let lbl = document.getElementById("lblGroupSize"); let userName = document.getElementById("inputName"); //Assign new label based off user input lbl.innerHTML = "Thanks " + userName.value + ". who are you going on an adventure with?"; }

 <div class="appContainer"> <br /> <.-- 1st section? Gather name --> <div class="gatherName"> <label id="lblName"> What's your name?</label> <input type="text" id="inputName" /> <button type="button" id="nameBtn" onclick="getGroupSize()"> Next </button> <br /> <br /> </div> <div id="lblGroupSize"></div> </div>

Answer 2

你在這里幾乎沒有錯。

html -

    <html>
        <div class="appContainer">
          <br />
          <!-- 1st section. Gather name -->
          <div class="gatherName">
            <label id="lblName"> What's your name?</label>
            <input type="text" id="inputName" />
            <button type="button" id="nameBtn" onclick="getGroupSize()">
              Next
            </button>
            <br />
            <label id="lbl"></label>
        
            
            <br />
          </div>
    </div>
    </html

javascript -

   function getGroupSize() {
      let lbl = document.getElementById("lbl");
      let userName = document.getElementById("inputName").value;
    
      //Assign new label based off user input
      lbl.innerHTML =
        "Thanks " + userName + ". who are you going on an adventure with?";
   }

注意事項，

從 HTML、use.value 屬性中獲取值。
不要多次聲明相同的變量。

為什么我的 Javascript 代碼中出現 [object HTMLInputElement]？

問題描述

2 個解決方案

解決方案1
1 已采納 2021-06-17 01:29:38

解決方案2
0 2021-06-17 01:59:22

為什么我的 Javascript 代碼中出現 [object HTMLInputElement]？

問題描述

2 個解決方案

解決方案1 1 已采納 2021-06-17 01:29:38

解決方案2 0 2021-06-17 01:59:22

解決方案1
1 已采納 2021-06-17 01:29:38

解決方案2
0 2021-06-17 01:59:22