0
145
Vistasgrabbing 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:
2 Respuestas
Responde la pregunta0
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>0
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);