无法使用 js 将 HTML 元素分配给变量

Question

我正在尝试在单击按钮时使用 JS 更改某些文本的显示属性。

我已经确认该函数正在触发并且运行使用调试器正确，但出于某种原因，我无法获取我需要更改的特定元素，并将其分配给变量。我还在页面上设置了 jquery。

我试过使用控制台，并且 document.getElementById('warning-textID') returns 是正确的元素，但是当我尝试将它设置为控制台中的变量时，它 returns 未定义。我在这里错过了一些非常明显的东西吗？

这里是 HTML、函数和 css。

//adding event listener
$(function() {
document.getElementById("submitdiscount").addEventListener("click", putCookie);
});


// click function
function putCookie() {
 var enteredValue = document.getElementById("nameBox").value;
  var validParam = "test";
  var warning = document.getElementById("warning-textID");
  var cookieCreated = false;
    
 if(enteredValue == validParam){
  console.log('do the thing')
    
  if(cookieCreated == false && enteredValue == validParam){
      warning.innerText = "Please enable cookies";
   warning.style.display = "";
   return;
    } else {
  warning.innerText = "Please enter the correct code."
  warning.style.display = "";
  enteredValue.value = "";
  return;
 }
}

.warning-text {
  color: red; text-align: center; 
  margin-bottom: 0px; 
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="employee-code-input-wrapper" id="employee-code-input">
 <div class="employee-code-input-header">
  <h2>Enter the employee code you received via email</h2>
 </div>

 <div class="search-bar emplyoee-code-input-input-wrapper" >
  <input class="emplyoee-code-input-input" type="text"  placeholder="Enter Employee Code" code="" id="nameBox" name="pass"> 
  <button  class="btn btn--submit-employee-form" value="Submit" id="submitdiscount" type="button">submit</button>
 </div>
 <h2 class="warning-text" id="warning-textID">
  Please enter the correct code.
 </h2>
</div>

Answer 1

我修正了一些错误并且成功了。

//adding event listener
$(function() {
  document.getElementById("submitdiscount").addEventListener("click", putCookie);
  // click function
  function putCookie() {
    var enteredValue = document.getElementById("nameBox").value;
    var validParam = "test";
    var warning = document.getElementById("warning-textID");
    var cookieCreated = false;
    if (enteredValue === validParam) {
      console.log('do the thing')

      if (cookieCreated == false && enteredValue === validParam) {
        warning.innerText = "Please enable cookies";
        warning.style.display = "block";
        return;
      }
    } else {
      warning.innerText = "Please enter the correct code."
      warning.style.display = "block";
      enteredValue.value = "";
      return;
    }
  }
});

.warning-text {
  color: red;
  text-align: center;
  margin-bottom: 0px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="employee-code-input-wrapper" id="employee-code-input">
  <div class="employee-code-input-header">
    <h2>Enter the employee code you received via email</h2>
  </div>

  <div class="search-bar emplyoee-code-input-input-wrapper">
    <input class="emplyoee-code-input-input" type="text" placeholder="Enter Employee Code" code="" id="nameBox" name="pass">
    <button class="btn btn--submit-employee-form" value="Submit" id="submitdiscount" type="button">submit</button>
  </div>
  <h2 class="warning-text" id="warning-textID">
    Please enter the correct code.
  </h2>
</div>

无法使用 js 将 HTML 元素分配给变量

can not assign HTML element to variable using js

javascript

css

display