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

Question

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

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

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

这是 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>