Input Class undefined, but Input id works - javascript

Not sure why the result is undefined here, when I change the following items, <input type="text" id="myText" to <input type="text" class="myText" and document.getElementById("myText") to document.getElementsByClassName("myText")
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_value

getElementsByClassName() returns a nodeList, so if you want your example to work you must use it like this:
<!DOCTYPE html>
<html>
<body>
First Name: <input type="text" class="myText" value="Mickey">
<p>Click the button to display the value of the value attribute of the text field.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByClassName("myText");
document.getElementById("demo").innerHTML = x[0].value;
}
</script>
</body>
</html>

You mentioned a link with an example seems
document.getElementsByClassName("myText").value;
You are not suppose to do like that because the getElememtaByClassName function will return a collection of values not a single value like getElementById.
Get the value by using array index
Look into this documentation

Related

How to take inputs from users in the textarea, and display the written string through textContent in JS?

If i am adding the change eventListener it take the value as a change i want to take a string through textarea and display it with textContent on HTML page, Please Help!
Try this example
<!DOCTYPE html>
<html>
<body>
<input type="number" id="myNumber" value="2">
<p>Click the button to change the number of the number field.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> input elements with type="number" are not supported in IE 9 and earlier versions.</p>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myNumber").value = "16";
}
</script>
</body>
</html>
kinda hard to get into the question. did you mean something like this?
document.getElementById('textarea').addEventListener('change', e => {
div.textContent = e.target.value;
});
http://jsfiddle.net/p7f8v6no/10/

Javascript passing data between text boxes

I'm working on getting data to go from one textbox to another using javascript. Im new to Javascript and im getting a document undefined or null error.
<!DOCTYPE html>
<html>
<head>
<script>
function doit() {
window.document.form1.txtbox1.value= window.document.form2.txtbox2.value;
}
</script>
</head>
<body>
<form name="form1">
Enter your name:
<input type="text" name="txtbox1" value="">
<input type="button" name="btn1" value="Click" onclick="doit()">
</form>
<br><br><br>
<form name="form2">
Results:
<input type="text" name="txtbox2" value="">
</form>
</body>
</html>
It seems that you are trying access the element as a property of the DOM.
Instead, you should use document.getElementsByName method.
Revised function:
function doit(){
// The [0] is for accessing the first item.
// If you are unfamiliar with arrays, visit
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
document.getElementsByName("txtbox1")[0].value = document.getElementsByName("txtbox2")[0].value;
}
You need to switch (swap) them :
window.document.form1.txtbox1.value= window.document.form2.txtbox2.value;
When you click a button - you set the value of the second input to the first one and probably the second input called 'Result' is empty.
Try:
function doit() {
window.document.form2.txtbox2.value = window.document.form1.txtbox1.value;
}
There should not be any error, it's just pass data in another direction as you probably expect.
Give a unique ID to both the input element.
<input type="text" id="txtbox1" value="">
<input type="text" id="txtbox2" value="">
and in function doit()
document.getElementById("txtbox2").value = document.getElementById("txtbox1").value

How do i alert the textbox input to a user

If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE

How to move a text from an input field to another by pressing a button in javascript

Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>

How to check ID element via tagname?

How I can get the ID of an element selected via getElementsByTagName? I want to check elements' IDs that are <img> elements.
You can access all element's attributes
document.getElementsByTagName("td")[0].id // returns the id attribute
document.getElementsByTagName("td")[0].style // returns the style attribute
You can access to the id directly with:
document.getElementById("myIdentifier") // returns the entire object
You can use .id. For example if I had the HTML:
<p id="test"></p>
You can get the id attribute by doing:
document.getElementsByTagName("p")[0].id;
Here is an exemple:
<html>
<head>
<script>
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x[0].id);
}
</script>
</head>
<body>
<input id="hi" type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()" value="What is the ID for the first element?">
</body>
</html>

Categories

Resources