can not assign HTML element to variable using js

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>

Why do you use warning.style.display = ""; May be you need warning.style.display = "none"; or warning.style.display = "block"; — Sanchonn
– Sanchonn, Commented Oct 12, 2018 at 4:20

Tu Nguyen · Accepted Answer · 2018-10-12 04:07:56Z

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>

Collectives™ on Stack Overflow

can not assign HTML element to variable using js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related