I am a beginner coder and I am having trouble with a simple program that basically says whatever you type into a text box under/above it. For example, if you type "Hello World" into the box, it will say "Hello World" in a paragraph under/above it. My current (faulty) code is this:
<p id="test"></p>
<input id="ipone type="text">
<script>
var x = document.getElementById("ipone").value;
x = test;
document.getElementById("test").innerHTML= document.getElementById("ipone").value;
</script>
I am trying to get it to work, and I am trying to have it as simple and small as possible. Please help.
The event you need is oninput, which triggers on any text typing, pasting, cutting, etc. by the user.
var input = document.getElementById("ipone");
var paragraph = document.getElementById("test");
input.addEventListener("input", function() {
var value = input.value;
paragraph.innerText = value;
});
/* just for demonstration */
#test{
min-height: 20px;
}
<p id="test"></p>
<input id="ipone" type="text">
I have wrapped your code into a function, and called that function whenever the input changes
more on the topic: Best way to track onchange as-you-type in input type="text"?
<p id="test"></p>
<input id="ipone" type="text" onchange="update()" onkeypress="update()" />
<script>
function update() {
var txt = document.getElementById("ipone").value;
document.getElementById("test").innerHTML= txt;
}
</script>
<input type="text" id="txtDemo" onchange="myFunction()"/>
<p>Entered Text:<span id="value"></span> </p>
<script>
function myFunction(){
var inputValue=document.getElementById("txtDemo").value;
var p=document.getElementById("value")
p.innerHTML=inputValue;
}
</script>
This code may help you
Related
This question already has an answer here:
Why is the value of my input always empty if I store it in a variable?
(1 answer)
Closed 12 months ago.
I want the value of the text input logged to the console but when I open the page the console.log() is empty. Why is this?
<input type="text" id="word"/>
//JavaScript
var newWord = document.getElementById("word").value;
console.log(newWord);
Ensure to add an event handler.
Add an onchange event listener to input element.
function func() {
var newWord = document.getElementById("word").value;
console.log(newWord);
}
<input type="text" id="word" onchange='func()'/>
You will need to enter a value to your input or add a default value
<input type="text" id="word" value="Hello"/>
var newWord = document.getElementById("word").value;
console.log(newWord);
This will log the value
Use .addEventListener to run a function when a change event is fired - This will run your function whenever the value in the input is updated and the focus is removed from the input box
document.getElementById('word').addEventListener('change', function () {
let newWord = this.value;
console.log(newWord);
});
<input type="text" id="word"/>
Or, you could use the input event, which will fire as soon as the input is changed
document.getElementById('word').addEventListener('input', function () {
let newWord = this.value;
console.log(newWord);
});
<input type="text" id="word"/>
I cannot get your question, but according to my understanding, you need to use a function to get the value of input box, when an event occurs. here is the code something like this.
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" id="myinput" onkeypress="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById('myinput').value;
document.getElementById('demo').innerHTML = x;
}
</script>
</body>
</html>
I know that this question sounds silly but i am curious why i can avoid this problem in JavaScript. Now in the code below i have given :
var btn=document.getElementById("btn");
btn.onclick = function get() {
var x = document.getElementById("text").value; // --> HERE
document.getElementById("para").innerHTML = x;
};
get();
<input type="text" id="text" value="">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
Now when i assign the variable x inside the function ,after the ("text") i get the .nodeValue instead of getting the .value. Is that a problem with my code editor or i have an error, because every time i put a name inside the input field it shows the result inside the paragraph it appears and fast also disappears
So I see 2 problems here:
You didn`t close your script tag.
You are calling get(); but the function does not exist in that scope but is only assigned in the onclick event.
This should do the trick:
var btn=document.getElementById("btn");
btn.onclick = function get() {
var x = document.getElementById("text").value;
document.getElementById("para").innerHTML = x;
};
<input type="text" id="text" value="HELLO">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
I have preset the value to "HELLO", but you can change it as you want, and it will deliver the value requested when clicking on the button.
I think your only problem may have been how you were declaring the event listener, I declared it as an event listener on the button listening to the 'click' event.
I also edited 'x' to be 'userInput' so it is more clear what it is trying to achieve.
var btn = document.getElementById("btn");
btn.addEventListener('click', function () {
var userInput = document.getElementById("text").value;
document.getElementById("para").innerHTML = userInput;
});
var btn=document.getElementById("btn");
btn.onclick = function () {
var x = document.getElementById("text").value; // --> HERE
document.getElementById("para").innerHTML = x;
};
btn.onclick()
<input type="text" id="text" value="hello">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
This is a working example of what you are trying to do. You can't declare a function in that context as it's anonymous. My example works perfectly, but you should do something more like
function get() {
//Do something
}
btn.onclick = get;
get();
I am not sure whether this will solve or not. However, I suggest you by giving an onclick event inside the input tag.
<input type="submit" value="submit" id="btn" onclick="get()">
<script>
function get() {
var x = document.getElementById("text").value;
document.getElementById("para").innerHTML = x;
}
</script>`
I got a input number into a var. I subtracted it to a number.
Thank you vicodin for helping me! I fixed it and it works! (I changed names for my program)
<!DOCTYPE html>
<html>
<body>
<p></p>
<span><input type="number" id="guess1"><p id="g1s"></p></span>
<input type="button" onclick="Calculate()" value="Calculate">
<script>
function Calculate() {
var GuessCon1 = document.getElementById("guess1").value;
var GuessCon1sub = GuessCon1 - 500;
document.getElementById("g1s").innerHTML = GuessCon1sub;
}
</script>
</body>
</html>
You assigned a string "numb1" to variable g. If you want to get the value of the input, you need to find that element (e.g. with document.geElementById method) and take a value from it.
Also, you want to trigger calculation, for example by a button click. I added a code in a snippet, you can run it and play around with it to get the idea.
var button = document.getElementById("substract")
button.onclick = function() {
var g = document.getElementById("numb1").value
var a = 578;
var x = g - a;
document.getElementById("demo").innerHTML = x;
}
<input type="number" id="numb1">
<input type="submit" id="substract">
<p id="demo"></p>
Related links:
Input Text value Property
onclick event
I am learning and want to know if there is a way to do this, let's say I have HTML input field:
<input type=text id="input">
Nearby I would have one button:
<button id="equal">=</button>
I want to write javaScript that would evaluate statement (if it is an equation like "2+3" "6/2" etc) in that text field and replace that statement with an answer for the equation. What I tried:
var equal = document.querySelector("#equal");
var input = document.querySelector("#input");
equal.addEventListener('click', function () {
eval(input.value) += input.innerText;
});
I already made only possible input 1234567890 and /*-+
If there is a way, I would highly appreciate the answer with explanation, started javaScript just recently so it is still like a dark forest for me, but I do have a wish to have a better understanding of it. :)
You just need to swap eval(input.value) += input.innerText to input.value = eval(input.value)
var equal = document.querySelector("#equal");
var input = document.querySelector("#input");
equal.addEventListener('click', function() {
input.value = eval(input.value);
});
<input type=text id="input">
<button id="equal">=</button>
Also, it would be recommended to use document.getElementById instead of document.querySelector, though there isn't much difference (mainly compatibility with older browsers). Read more
You want the place where you type in the expression to be different than the place where you display it:
<!DOCTYPE html>
<html>
<body>
<button id="evaluate">Get answer</button>
<input id="input" />
<p id="result">waiting for answer...</p>
<script>
var evaluate = document.getElementById("evaluate");
var input = document.getElementById("input");
var result = document.getElementById("result");
evaluate.addEventListener('click', function () {
try {
result.textContent = eval(input.value);
}
catch (error) {
result.textContent = "waiting for answer...";
}
});
</script>
</body>
</html>
Im having trouble creating multiple input texts with javascript.
My point is create a new input text everytime the input before is completed. (parent?)
Ive some code for comboboxs, but this time I need just input text box.
How can I do that ?
I've found this code:
<script type="text/javascript">
function addInput()
{
var x = document.getElementById("inputs");
x.innerHTML += "<input type=\"text\" />";
}
</script>
<input type="button" onmousedown="addInput();" />
<div id="inputs"></div>
But for my problem button is obsolete.
I think my event trigger will be something arround this "when user click in an input text box and it is != blank it creates a new one".
I migth need some ID to identify every input text box.
Cheers.
JSBIn Demo
Guess this helps:
<div id="myDiv">
<input type="text" id="txt_1" onkeydown="newTextBox(this)" />
</div>
<script type="text/javascript">
function newTextBox(element){
if(!element.value){
element.parentNode.removeChild( element.nextElementSibling);
return;
}
else if(element.nextElementSibling)
return;
var newTxt = element.cloneNode();
newTxt.id = 'txt_'+( parseInt( element.id.substring(element.id.indexOf('_')+1)) + 1);
newTxt.value='';
element.parentNode.appendChild(newTxt);
}
</script>
HTML code:
<div id="inputcontainer">
<input type="text" name="input0" id="input0" onkeyup="addInput();" />
</div>
And Javascript:
var currentindex = 0;
function addInput(){
var lastinput = document.getElementById('input'+currentindex);
if(lastinput.value != ''){
var container = document.getElementById('inputcontainer');
var newinput = document.createElement('input');
currentindex++;
newinput.type = "text";
newinput.name = 'input'+currentindex;
newinput.id = 'input'+currentindex;
newinput.onkeyup = addInput;
container.appendChild(newinput);
}
}
This will add a new input to the list only when the last input is not empty.
http://jsfiddle.net/HJbgS/
Have a look at the onchange event on your text input field. You can use it, like you use onmousedown on your button.
See http://www.w3schools.com/jsref/event_onchange.asp for an example.
In your addInput() function you should then check if the input of the previous textfield is != "".