不能使用 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>