Javascript getting the value of element dosn't work - javascript

i'm trying to obtain the value of an element with javascript but i'm getting undefined as it's value even if i know it isn't.
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to display the first array element, after a string split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "a,b,c,d,e,f";
var arr = str.split(",");
document.getElementById("demo").innerHTML= arr[0];
alert(document.getElementById("demo").value);
}
</script>
</body>
</html>
How can i obtain the value of "demo" once i changed it?

You are actually setting the innerHTML attribute of the #demo element, not value.
function myFunction() {
var str = "a,b,c,d,e,f";
var arr = str.split(",");
document.getElementById("demo").innerHTML = arr[0];
alert(document.getElementById("demo").innerHTML);
}
<p>Click "Try it" to display the first array element, after a string split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Related

Uncaught TypeError from generated JavaScript elements

I'm generating a dynamic list of from/inputs and buttons from JSON. The button triggers a JavaScript function that reads the current content of the input in a form. However when the button is clicked I get the following error code Uncaught TypeError: Cannot read property '0' of undefined.
This tells me there are no elements in the form but I don't know why. Tryed 0-3 just to make sure.
Length also return undefined. I am able to edit the innerHTML of the form.
A striped down code I'm trying to get a value from.
<!DOCTYPE html>
<html>
<body onload="gen_form()">
<div id="connectResult"></div>
<p id="demo">RESULT HERE</p>
<script>
const connect_result = document.getElementById("connectResult");
function gen_form(){
var div = document.createElement("DIV");
div.setAttribute("id", "div0");
div.innerHTML += "sometxt<br/>";
var form1 = document.createElement("FROM");
form1.setAttribute("id", 'form_sometxt2_0');
var input1 = document.createElement("input");
input1.setAttribute("type",'text');
input1.setAttribute("name",'textbox');
form1.appendChild(input1);
div.appendChild(form1);
var btn4 = document.createElement("BUTTON");
btn4.setAttribute("id", 'WRITE_sometxt2_0');
btn4.innerHTML = 'WRITE';
btn4.setAttribute("onclick", "myFunction(this)");
div.appendChild(btn4);
connect_result.appendChild(div);
}
function myFunction(param) {
var text = document.getElementById("form_sometxt2_0").elements[0].value + "<br>";
document.getElementById("demo").innerHTML = text;
}
</script>
</html>
The following does exactly what I want but it is static. The above is based off this.
<!DOCTYPE html>
<html>
<body>
<form id="frm1">
<input type="text">
</form>
<button onclick="myFunction()">Try it</button>
<p id="demo">RESULT HERE</p>
<script>
function myFunction() {
var text = document.getElementById("frm1").elements[0].value + "<br>";
document.getElementById("demo").innerHTML = text;
}
</script>
</html>
My question is: What is the difference between these two code snippets and how do I fix said error?
I would prefer not to use a submit input as there will be a second button that edits the contents of the input value.
PS: I'm fairly new to JavaScript and its terminology.
Using Chrome as my debugger.
Tipo error.comment
var form1 = document.createElement("FROM");
should be:
var form1 = document.createElement("FORM");

How to print function result in php?

I have this code and trying to print the results but it's not printing, please help. thankyou.
function GetRandom() {
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.value = (item);
}
<!DOCTYPE html>
<html>
<body>
<p> click the button to run the fumction</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
</html>
it works where i use the input form type to get the results but i don't want that, i want it to just be echoed as a normal text in the page. thanks. i am a noob in this stuff so looking for help.
function GetRandom() {
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.value = (item);
}
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a random number between 1 and 10.</p>
<button onclick="GetRandom()">Try it</button>
<input name="test" type="text" id="pwbx" value="">
<p id="pwbx"></p>
</body>
</html>
<p> tag doesn't have a value property. Use innerHTML instead.
function GetRandom()
{
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.innerHTML = item;
}
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a random number between 1 and 10.</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
</html>
as Tim said in the comments... you will want to use innerHTML not value for non input tags....
<!DOCTYPE html>
<html>
<body>
<p> click the button to run the fumction</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
<script>
var myArray = ['item 1', 'item 2']; //should move this outside of getRandom so it doesn't reallocate each run;
function GetRandom() {
var randomInt = Math.floor(Math.random() * Math.floor(myArray.length));
var item = myArray[randomInt];
document.getElementById("pwbx").innerHTML = item;
}
</script>
</html>

Where is nodeValue for body.childNodes?

I runs this Javascript code and get nodeType and nodeName without problem for the body.childNode. However, nodeValue fail to display.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the node types of the body element's child nodes.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.</p>
<!-- My personal comment goes here.. -->
<div><strong>Note:</strong> Comments in the document are considered as comment nodes.</div>
<p id="demo"></p>
<script>
function myFunction() {
var c = document.body.childNodes;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + "notdType: "+ c[i].nodeType + " NodeName: "+c[i].nodeName+" NodeValue: "+c[i].nodeValue +"<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Element nodes don't have node values. Instead, they have child nodes of their own.

How can i return 2 values with getElementsByClassName()? [duplicate]

This question already has answers here:
Loop through an array in JavaScript
(46 answers)
Closed 6 years ago.
<!DOCTYPE html>
<html>
<body>
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<p>Click the button to change the text of the first div element with class="example" (index 0).</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>
Link for example: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementsbyclassname
This example show us how to change first div to "hello world". I wanna learn how can i change all classes to "Hello world". I tried to change x[0].innerHTML = "Hello World!"; to x[*].innerHTML = "Hello World!"; but nothing happened. Any idea? :/
Use loop as:
<!DOCTYPE html>
<html>
<body>
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<p>Click the button to change the text of the first div element with class="example" (index 0).</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
for(var i = 0; i < x.length; i++)
x[i].innerHTML = "Hello World!";
}
</script>
</body>
</html>
You have to use a loop in order to affect all of the elements:
function myFunction() {
var x = document.getElementsByClassName("example");
for (var i = 0; i < x.length; i++)
x[i].innerHTML = "Hello World!";
}
You can use querySelectorAll method:
function myFunction() {
var divs = document.querySelectorAll('.example');
[].forEach.call(divs, function(div) {
div.innerHTML = "Hello World!";
});
}

why this simple snippet of javascript code dosen't work

Where am I doing wrong?
Why this snippet of javascript code dosen't work?
This must be easy, but I just don't know why, I'm really a newbie at this
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to make a BUTTON element.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
var bodyel = document.getElementById("body");
var block = document.createElement("div");
block.innerHTML = "whatever";
bodyel.appendChild(block);
};
</script>
</body>
</html>
Your <body> element does not have an "id" attribute at all, let alone one whose value is "body".
You could do this:
<body id=body>
Or this:
var bodyel = document.getElementsByTagName('body')[0];
Or just:
var bodyel = document.body;
Here is the problem
var bodyel = document.getElementById("body"); //body is not id
You can use
getElementsByTagName('body')[0];
or
var b = document.body;
Change the line:
var bodyel = document.getElementById("body");
To the following
var bodyel = document.body;
The body does not need to be called with a id
and if yes you have to add that id.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to make a BUTTON element.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction() {
var bodyel = document.body;
var block = document.createElement("div");
block.innerHTML = "whatever";
bodyel.appendChild(block)
}
</script>
</body>
</html>
Fiddle
You need to change your code a little:-
var bodyel = document.getElementsByTagName("body")[0];
Rest will work. Have a look at this fiddle. Also try looking into document-body-appendchildi

Categories

Resources