Get element by input text id - javascript

what is wrong with the code? i have to get the text from the input text box after clicking on submit button, the input text value must be shown in paragraph.
<html>
<body>
<p id="demo"></p>
<br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()"></button>
<script>
function myFunction()
{
var x = document.getElementById("myList");
var txt = "Welcome ";
for (var i=0;i<x.length;i++)
{
txt = txt + x.elements[i].id + "br";
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

You would want to use this code
document.getElementById('myList').value;
it will grab the value from the input box element.

Check here a demo
Check here no need to loop all the elements
You just need a id of the element so why are you looping it ?
Here is the source code of it
This is the javascript code looks like
function myFunction()
{
var x = document.getElementById("myList");
var txt = "Welcome ";
txt = txt + x.value + "br";
document.getElementById("demo").innerHTML=txt;
}
You want a value from the element so you have to take a value you can see in the functiont
x.value so it will retrive the value from the element and then your function will work i hope this will help you

There are two ways to fix it:
[1] Change x.length to x.value.length and x.elements to x.value.elements
The fiddle
[2] Change var x = document.getElementById("myList"); to var x = document.getElementById("myList").value;
And the fiddle, why not?
A text box has no property length, so I think you are referencing to its text? That's what this fix will do. (Also, it's better practice to use method 2.)

<html>
<body>
<p id="demo"></p>
<br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myList").value;
alert(x);
var txt = "Welcome ";
for (var i = 0; i < x.length; i++) {
txt = txt + x.charAt(i) + "<br />";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

loop??? I didn't understand its very simple try this.
<html>
<body>
<p id="demo"></p><br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myList");
var txt = "Welcome " + x.value;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
OR
var x = document.getElementById("myList").value;
var txt = "Welcome " + x;

You have to take the "myList" id's value and then assign it to innerHTML of tag which could be done as follows :
<html>
<body>
<p id="demo"></p>
<br>
<form>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()"/>
</form>
<script>
function myFunction()
{
var txt = "Welcome";
var x = document.getElementById("myList").value;
txt = txt +" "+x;
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

Related

Math.pow(x,y) isnt working when used with document.getElementById('z').value

Was trying to use Math.pow(x,y) on two values inputted in an HTML tag, for some reason it ain't working.
Input1: <input id="input1"> Input2: <input id="input2">
<button onlick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById('input1').value;
var y = document.getElementById('input2').value;
var z = Math.pow(x, y);
document.getElementById("demo").innerHTML = +z;
}
</script>
You had a typo in your onclick handler attribute. It should be "onclick" not "onlick". Also, you should add the type="number" attribute to your inputs so that users can't enter non-numbers. Furthermore, you should explicitly parse the input values into integers using the parseInt function rather than relying on JS's implicit conversions. Full working example:
function myFunction() {
var xText = document.getElementById('input1').value;
var yText = document.getElementById('input2').value;
var xNum = parseInt(xText, 10);
var yNum = parseInt(yText, 10);
var z = Math.pow(xNum, yNum);
document.getElementById("demo").innerHTML = z;
}
Input1: <input id="input1" type="number">
Input2: <input id="input2" type="number">
<button onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
It's onclick and not onlick which you had mistakenly typed in your code. Do note that you would get NaN as the output if either of the input by user is not in integer format.
So, you can either mention type = 'Number' while taking input explicitly or make a check function which would give an error prompt to user if the input is not a number. I have included a format check function in the demo below.
The below code works after the correction -
<!DOCTYPE html>
<html>
<body>
Input1: <input id="input1"> Input2: <input id="input2">
<button onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById('input1').value;
var y = document.getElementById('input2').value;
if (isNaN(x) || isNaN(y)) {
document.getElementById("demo").innerHTML = 'Wrong input format';
} else {
var z = Math.pow(x, y);
document.getElementById("demo").innerHTML = +z;
}
}
</script>
</body>
</html>

How to set value with input text to get tag and set condition on text in jquery

How i can set value to jquery inseted set html code
in this question i set value on body
link
how i can set html code with input text and work like link
i write this code
<input type="text" style="width: 400px;height:400px;" class="in" /><br />
<input type="button" value="submit" onclick="myFunction()" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myFunction() {
var text = $("input:text").val();
console.log(text);//its ok but i don't how to use text in arr
var arr = $('ol li').map(function () {
var $li = $(this);
return {
value: $li.find('.Value').text(),
name: $li.find('.Name').text()
}
}).get();
console.log(arr);
}
</script>
</body>
</html>
Do you want set Text box value by jquery?
$('.in').val('your custom value or text');
First. For input multiline you need to use <textarea>
Then split string with
("Yourtext").split("Your Seperator",limit_arraysize);
//example
alert(("Howdy! I'm Flowey the flower").split(" ",3));
//That mean you split with " " (1 blank space)
OUTPUT:
[
"Howdy!"
,"I'm"
,"Flowey"
]
Some example below
function myFunction() {
var arr = [];
var text = $("textarea").val();
var submit = text.split("\n"); // USE TO split multiline
for (var i = 0; i < submit.length; i++) {
var temp = submit[i].split(",", 2);
arr[i] = {
value: temp[0],
name: temp[1]
};
}
console.log(arr);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea type="text" style="width: 400px;height:200px;" class="in">
25,ok
80,good
90,no</textarea>
<!--use TEXTAREA instead INPUT for multiline-->
<br>
<input type="button" value="submit" onclick="myFunction()" />

Append value to an input field in Javascript

Here i'm trying to append some text to an input field but everytime the old value gets replaced with new value.
HTML
<input type="text" id="taginput" class="input" name="tags">
Javascript
function update(i){
document.getElementById('taginput').value = i.innerHTML;
}
no jquery please.
You have to get the old value first, and then add to it
function update(i){
var elem = document.getElementById('taginput');
var old = elem.value;
elem.value = old + i.innerHTML;
}
or you could add it to with += directly
elem.value += i.innerHTML;
function update(i){
let elem = document.getElementById('taginput');
elem.value = elem.value + i.innerHtml;
// Or elem.value += i.innerHtml;
// elem.value = elem.value.concat(i.innerHtml)
}
<html>
<head>
</head>
<body>
<input id="my_msg" type="text">
</body>
<script>
document.getElementById('my_msg').value = "text-value";
</script>
</html>
document.getElementById('my_msg').value = "text-value";
Use above script to append 'text-value' to input field.
Thanks

how to take url from a textfield which is to be filled by the user and view in new tab using html or javascript

this is the codeand its giving blank
< div style = "position:"absolte ";align="center ";">
Surf here: < input type = "text" id = "myText" value = "" >
< br >
< button onclick = "myFunction()" > Load < /button>
<p id="demo"></p >
< script >
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
var newwindow = window.open(x);
} < /script>
</div >
This i snot working help me out please !
I have make some changes in your code. Please use http also when type URL like http://www.google.co.in
<div style = "position:absolte;">
Surf here: <input type = "text"
id = "myText"
value = "" >
<br>
<button onclick = "myFunction()" > Load </button>
<p id="demo"></p >
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
var newwindow = window.open(x);
} </script>
</div>
function getURL(){
window.location.href = document.getElementById("url").value
}
Try with this code.
Try this code, start typing url like http://google.com :
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
window.open(x, '_blank');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:absolute;">
Surf here:
<input type="text" id="myText" value="">
<br>
<button onclick="myFunction()">Load
</button>
<p id="demo"></p>
</div>
If you test here, you will get this error in console Blocked opening 'http://google.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set, then put that in your code.
function myFunction() {
var x = $("#myText").val();
$( "#demo" ).html( x );
window.open(x, '_blank');
}
use http or https in the input field. Tried it in JSBin, it works.
Also the quotation marks in your div look mispaced. Try this:
<div style="position:'absolute';">
Surf here:<input type="text" id="myText" value=""><br>
<button onclick="myFunction()">Load</button>
<p id="demo"></p>
</div>

How to Get and Print a String Using HTML

I have a small project that I'm working on (dealing with getting a name and printing it with a string). The problem is that when I click on the button, nothing happens.
Code:
<!DOCTYPE html>
<html>
<head>
<link type = "css" rel="stylesheet" href = "css.css"/>
<script>
var button = document.getElementById('send');
var enter = document.getElementById('enter');
button.onclick function() {
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}
</script>
<title>HAL 9000 SIM</title>
</head>
<body>
<p id=p1> What is your name? </p>
<br><br>
<input type = "text" id="enter" name = "entername"><br>
<input type = "button" id="send" value="Enter">
</html>
It's not complete, as you can probably tell, so any other pointers are greatly needed!
It seems you forgot the "=" sign after the button.click.
Check this:
<body>
<p id=p1>What is your name?</p>
<br>
<br>
<input type="text" id="enter" name="entername">
<br>
<input type="button" id="send" value="Enter">
--
var button = document.getElementById('send');
var enter = document.getElementById('enter');
button.onclick =
function () {
if(enter.value.length > 0)
{
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}else
{
alert("Please input the required fields!");
}
};
http://jsfiddle.net/pg5k60rz/
First of all, you didnt assign to onclick your function
var enter = document.getElementById('enter');
button.onclick = function() {
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}
secondly if you want your code work, but script before closing body tag

Categories