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

Question

I am trying to change the display property of some text using JS, upon button click.

I have confirmed that the function is firing and running correctly using debugger, but for some reason, I can't grab the specific element I need to change, and assign it to a variable. I also have jquery set up on the page.

I have tried using the console, and document.getElementById('warning-textID') returns the correct element, but when I try to set it to a variable in console, it returns undefined. Am I missing something super obvious here?

Here is the HTML, function and 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

I fixed some mistakes and it worked.

 //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>