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>

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

1 个答案: