grabbing text from input box and printing it with console.log

Issue

I have an element called <input id="emailprotectionspamallinput" class="ms-SearchBox-field" type="text" value=""> where there is nothing inside the box at first.

I want to add some text to the input field, then grab the value from the text box. However the value seems to always come out to be null when perform a console.log

Here is the button that I want to trigger the value grabbing:

<button class="ms-Button ms-Button--primary" style="float: left" id="get-getblacklistallemailinfor">
                  <span class="ms-Button-label">CONFIRM</span> 
                </button>

Here is the javascript that handles the button:

$("#get-getblacklistallemailinfor").click(getblacklistallemailinfor);
function getblacklistallemailinfor(){

  const emailvar = document.getElementById("emailprotectionspamallinput")
  const output = document.querySelector('div.enteremailinfoforblacklistall');
  console.log(emailvar)
  console.log(emailvar)
  console.log(output)


}

Here is a picture of what happens:

Solution

Since you were already using jquery you can get the input with:

const emailvar = $('#emailprotectionspamallinput').val();

I commented out your output as that is undefined. You did not provide a div with that name

$("#get-getblacklistallemailinfor").click(getblacklistallemailinfor);
function getblacklistallemailinfor(){

  const emailvar = $('#emailprotectionspamallinput').val();
  //const output = document.querySelector('div.enteremailinfoforblacklistall');
  console.log(emailvar)
  console.log(output)


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="email" class="ms-SearchBox-field" type="text" value="">


<button class="ms-Button ms-Button--primary" style="float: left" id="get-getblacklistallemailinfor">
<span class="ms-Button-label">CONFIRM</span> 
</button>

Answered By - BeerusDev