CODEWITHSUNDEEP
javascripthtml
user16660683
user16660683

Reputation:

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

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: enter image description here

Upvotes: 2

Views: 1337

Answers (3)

Abhisek Roy
Abhisek Roy

Reputation: 1

<input type="text" #box1 (keyup)="getName(box1.value)" placeholder="Your Name"/>

<input type="text" #box2 (keydown)="getName(box2.value)" placeholder="Your Name"/>

<input type="text" #box3 (keypress)="getName(box3.value)" placeholder="Your Name"/>

<input type="text" #box4 (blur)="getName(box4.value)" placeholder="Your Name"/>

<input type="text" #box5 (input)="getName(box5.value)" placeholder="Your Name"/>

Here, getName is a function.

Upvotes: 0

TARN4T1ON
TARN4T1ON

Reputation: 522

const output = document.querySelector('div.enteremailinfoforblacklistall');

Selects the first div with the class enteremailinfoforblacklistall, not any input element.

You can select your input element with

const output = document.querySelector("#emailprotectionspamallinput");

instead.

output will be an instance of HTMLInputElement in this case, which possesses the value attribute.

value: Returns / Sets the current value of the control.

To access what the user has input into the output element, use

output.value

which you can then also log to the console. It's just an attribute.

console.log(console.value);

Upvotes: 0

BeerusDev
BeerusDev

Reputation: 1509

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>

Upvotes: 1

Related Questions