How to gather & display an input value in the console (JS)

JavaScript
1

Hey guys!

I am working on the Wikipedia Viewer Project; the setup is done, now I am diving intp the tricky JS part haha; but before doing that, I want to make sure that I am able to retrieve all values that are typed into my input of type text.

I have tried selecting the element in JS and console.log(element.value), but the console logs “undefined”;
how can I achieve this?

Thank you :))

2

Try these

jQuery

var value = $("#ElementID").val();
console.log(value);

Plain JavaScript

var value = document.getElementById("ElementID");
console.log(value);
2 Likes
3

I have tried the Jquery way, but as i click on the button the console still logs an empty string? what could be the reason?

4

Give code block in forum post .

5
6

.val function works for input elements not div okay …
$(document).ready(function(){

var searchButton = document.querySelector(“button”);
var lucky = document.querySelector("#random");

searchButton.addEventListener(“mouseover”,function(){
searchButton.style.backgroundColor = “#d7dde8”;
})
searchButton.addEventListener(“mouseout”,function(){
searchButton.style.backgroundColor = “white”;
})
lucky.addEventListener(“mouseover”,function(){
lucky.style.backgroundColor = “#d7dde8”;
})
lucky.addEventListener(“mouseout”,function(){
lucky.style.backgroundColor = “white”;
});

$("#go").click(function(){
var searchWord = $("#search input").val();
console.log(searchWord);
})

});

use it like this

7

oh my bad, did not remember I gave the same Id to div and input…thanks a lot, I’ll change Id and adjust !

1 Like