I would like to show what I write in the input, but everytime I try the alert window shows "undefined".
This is the code.
Thanks.
<body>
<input id="input"></input>
<button id="search">search</button>
<script>
document.getElementById('search').addEventListener("click", show);
var input = getElementById('input');
var search = input.value;
function show() {
alert(search);
}
</script>
</body>
First you need to use document.getElementById instead of just getElementById.
Then you need to put var search = input.value inside the show function so that it gets the current value each time you want to show it, and not just the initial one.
document.getElementById('search').addEventListener("click", show);
var input = document.getElementById('input');
function show() {
var search = input.value;
alert(search);
}
<input id="input"></input>
<button id="search">search</button>
you must bring var search into show function declaration in order to get new value of search box every time the event occurs.
function show(){
var search = input.value;
alert(search);
}
Related
so I have an input element with the id of "answer" and a button. I've added an event listener for the button and tried to call a function that saves the text inside of the input into local storage. The console is telling me that "innerHTML" is null, but i'm not sure what I'm supposed to do.
<input type="text" id="answer" />
<button id="button">click me</button>
var inputAnswer = document.getElementById("#answer")
var buttonEl = document.getElementById("button")
buttonEl.addEventListener("click", saveToStorage())
function saveToStorage() {
localStorage.setItem("task", inputAnswer.innerHTML);
}
<input type="text" id="answer" />
<button id="button">click me</button>
<script type="text/javascript">
var inputAnswer = document.getElementById("answer");
var buttonEl = document.getElementById("button");
buttonEl.addEventListener("click", addAnswerToLocalStorage);
function addAnswerToLocalStorage() {
const value = inputAnswer.value;
localStorage.setItem("answer", value);
}
</script>
There is mistake in getting the reference of input field. Instead of #answer document.getElementById("#answer") it should be only answer only. Further, I checked it on my local machine and it is working fine.
getElementById() expects an ID, no hashtag. Change var inputAnswer = document.getElementById("#answer") to var inputAnswer = document.getElementById("answer") (remove the #).
buttonEl.addEventListener("click", saveToStorage()) invokes the saveToStorage() function immediately, which is not what you want. Instead, pass it as a reference: buttonEl.addEventListener("click", saveToStorage).
I have a HTML page with an input field
Someone enters some text into it
They click a button
I want to grab the value of the input field AFTER they click the button with some JS code(client-side) and then print it to the console/save it to a file.
How would I go about doing this?
I've tried looking but I can't find anything like this at all :/
Thanks! :)
This example should help you to achieve your goals.
const inputNode = document.getElementById('input');
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', () => {
const inputValue = inputNode.value;
// do what ever you wan't
});
<input id="input" type="text" />
<button id="button">Click</button>
Try this:
// This function is called by the HTML code onclick on the button
var get_content_of_input = function(){
var user_input = document.getElementById("text_field").value;
// Now you can use the variable user_input containing the text
}
<input id="text_field">Please enter Text</input>
<button id="button" onclick="get_content_of_input()">Click here to sumbit</button>
The content of the text field will now be saved in the variable "user_input".
I have a HTML-JavaScript script in which the user can insert data to a new array [] by using a form's text field and an insert button.
By pressing insert button, the user inserts the data typed into the array.
I have a function which prints all the values of the array into <p id="demo"></p> and runs itself every 100 milliseconds in order to be updated with the arrays values.
I also have a reset button to delete every array's value when clicked.
What I want to do is add a delete button next to each array's value in order to be easier for the user to delete the wrong value he inserted.
I am using this code to insert values and print them:
HTML:
<div align="center">
<form id="form1">
<input type="text" name="fname" id="fname" placeholder="Type here!">
</form>
<br>
<input type="button" id="Button Insert" onclick="myFunction()" value="Insert">
<input type="button" onclick="myFunction3()" value="Reset">
</div>
<p id="demo" align="center"></p>
JavaScript/JQuery:
var all_values =[];
function myFunction() {
var temp_val = $("#fname").val();
all_values.push(temp_val);
document.getElementById("form1").reset();
}
setInterval(function () {
$("#demo").html(all_values.join("<br>"));
}, 100);
function myFunction3() {
all_values.length = 0;
}
To be more specific I want something like these things: iOS example JSFiddle Example 1 JSFiddle Example 2.
Could you please help me? Thanks in advance.
I'd do it the other way around.
Remove setInterval as it's really bad way to do such things.
Remove white spaces from the id attribute (id="Button-Insert", not id="Button Insert")
Don't use onclick attributes. Instead, register click event handlers with jQuery
// caching is a good practice when you reffer to the same elements multiple times:
var all_values =[], demo = $("#demo"), form = $("#form1")[0], fname = $("#fname");
$('#Button-insert').click(function(){
var temp_val = fname.val();
all_values.push(temp_val);
// create delete button along with the value
demo.append('<p>'+temp_val+' <button value="'+temp_val+'" type="button" class="del-btn">Delete</button></p>');
form.reset();
});
$('#Button-reset').click(function(){
all_values = [];
demo.html('');
});
// event delegation for dynamic elements:
demo.on('click', '.del-btn', function(){
all_values.splice(all_values.indexOf($(this).val()), 1);
$(this).parent().remove();
});
JSFiddle
Simply create the delete buttons at the same time you create the table.
function loadvalues(){
var i, button;
$('#demo').empty();
for(i in all_values){
$('#demo').append(all_values[i]);
button = $('<button>',{'text':'Delete'}).click(function(){
all_values.splice(this,1);
loadvalues();
}.bind(i)).appendTo('#demo');
$('#demo').append('<br>');
}
}
Also you don't need to poll, you could simply add each one on demand with a function like this:
function addVal(){
var val = $("#fname").val(), i = all_values.length;
all_values.push(val);
$('#demo').append(val);
button = $('<button>',{'text':'Delete'}).click(function(){
all_values.splice(this,1);
loadvalues();
}.bind(i)).appendTo('#demo');
$('#demo').append('<br>');
}
I had some typos, the code works,
Check here:
http://codepen.io/anon/pen/QbvgpW
I want to get the value of a text input. I would like to do this by using id and getElementById :
here HTML code :
<form>
<fieldset>
<legend>Input ordinate :</legend>
<input type="text" id="ordinateId" name="input"/>
<input type="button" id="startbuttonId" value="Start particle"/>
</fieldset>
</form>
and Javascript :
<script type="text/javascript">
var button = document.getElementById("startbuttonId");
var value = document.getElementById("ordinateId").value;
console.log(value);
button.onclick = function() {
console.log(value);
}
</script>
but into the console, nothing appears for value. Where is the problem ?
Thanks
The problem is that you are checking for the input's value before it is set(on document load). Just move the variable declaration within the click function like so:
var button = document.getElementById("startbuttonId");
button.onclick = function() {
var value = document.getElementById("ordinateId").value;
console.log(value);
}
JSFiddle
You need to get the value again when the event fires. Just move your var value
button.onclick = function() {
var value = document.getElementById("ordinateId").value;
console.log(value);
}
With your current script you are assigning value only once, which I am assuming is an empty string. You need to put the assignment inside the function so it gets the current value of the input when it is clicked.
<script type="text/javascript">
var button = document.getElementById("startbuttonId");
button.onclick = function() {
var value = document.getElementById("ordinateId").value;
console.log(value);
}
</script>
I am trying to add elements to an array via a form. I am using the unshift() method. The code below doesn't work and I would like to know why.
<form>
<input id="input"> </input>
<input type = "button" id="button"> Click me </input>
</form>
<script>
var input = document.getElementById("input").value;
var button = document.getElementById("button");
var myArray = [];
myArray.unshift(input);
button.onclick = function alerted (){
alert(myArray);
};
</script>
Your quoted code runs immediately when the page is loaded. The form field won't have anything in it then, so its value will be ''. When you alert that, the default toString operation on the array will result in '' and the alert will be blank.
You want to run your unshift code in response to a user event, such as the button being clicked, rather than right away. You can do that by setting input to be the element (remove .value from that line) and then moving your line with unshift into the function you're assigning to onclick, adding the .value there:
button.onclick = function alerted (){
myArray.unshift(input.value);
alert(myArray);
};
Other notes:
You never write </input>. Normally you don't close input tags at all. If you're writing XHTML (you probably aren't), you'd put the / within the main input tag like this: <input id="input" />. But again, you're probably not writing XHTML, just HTML.
The value (caption) of an input button goes in its value attribute, not content within opening and closing tags. (You would use opening and closing tags with the button element, not input.)
Taking all of that together, here's a minimalist update: Live copy | source
<form>
<input id="input"><!-- No ending tag -->
<input type = "button" id="button" value="Click me"><!-- No ending tag, move value where it should be -->
</form>
<script>
var input = document.getElementById("input"); // No .value here
var button = document.getElementById("button");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(input.value); // Moved this line, added the .value
alert(myArray);
};
</script>
DEMO
You need to a) get the value in the click and b) return false if you want the button to not submit. I changed to button. Alternative is <input type="button" value="click me" id="button" />
You may even want to empty and focus the field on click...
<form>
<input id="input" type="text"/>
<button id="button"> Click me </button>
</form>
<script>
var input = document.getElementById("input"); // save the object
var button = document.getElementById("button");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(input.value); // get the value
alert(myArray);
return false;
};
</script>
You're not getting the new value in the onclick function.
Try this: http://jsfiddle.net/SeqWN/4/
var button = document.getElementById("button");
var i = document.getElementById("input");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(i.value);
alert(myArray);
};