Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have been having problems with getting getElementById working on a specific webpage. So, I've cut it down the following minimal code. In this code, first alert() is displayed, but the second one is not, and about the only thing I can guess why is getElementById() is failing. Any ideas?
<!doctype html>
<html>
<head>
<script type="text/javascript">
function Process(X) {
alert("In Process at A");
var y = Document.getElementById("YourName").value;
alert("At B");
}
</script>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div>
<form onsubmit="Process(getElementById('YourName').value);return false;">
<label for="name">Your name</label>
<input type="text" maxlength="50" name="YourName" id="YourName">
<input type="submit" value="Do it" />
</form>
</div>
</body>
</html>
Document.getElementById fails because getElementById is a property of the document object not the Document object. JS is case-sensitive.
getElementById('YourName') fails because getElementById is a property of the document object and is not a global.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" >
</script>
</head>
<body>
<input type="button" name="add" value="ADD DIV" onclick="addRow();"/>
<p id="content">
</p>
<script type="text/javascript">
function addRow(){
var div=document.createElement('div');
div.className='row';
console.log(document.getElementById('content'));
console.log("CRETING DIV"+div);
div.innerHTML = ` <input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label>
<input type="checkbox" name="check" value="1" /> Checked?
</label>
<input type="button" value="-" onclick="removeRow(this)" /> `;
console.log("after creting the DIV "+div);
document.getElementById('content').appendChild('div');
}
</script>
</body>
</html>
THE PROBELM:
when I am using the create element to create the DIV tag, it does not create the tag rather shows in the console [object HTMLDivElement]
Also, the appendChild('div') does not work.it says
RemoveDIVtagUsingJS.php:27 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
I don't know why my document.createElement('div'); is not working.What to do?
Leave out the quotation marks in function call appendChild:
document.getElementById('content').appendChild(div);
should work.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I know I'm a beginner at this, but I really need to learn the rules. I'm trying to make a simple example of javascript. Its a box with three buttons, but for some reason only one of them works. They do have different ID types, so there must be another rule I don't know.
<!DOCTYPE html>
<html>
<head>
<title>Javascript box</title>
</head>
<body>
<p>Press buttons to change the box</p>
<div id="box" style="height:100px; width:100px; background-color: limegreen; margin:50px"></div>
<br>
<button id="less">less</button>
<button id="more">more</button>
<button id="none">Reset</button>
<script type="text/javascript">
document.getElementById("less").addEventListener("click", function(){
document.getElementById("box").style.height = "25px";
});
document.getElementByID("more").addEventListener("click", function(){
document.getElementById("box").style.height = "150px";
});
document.getElementById("none").addEventListener("click", function(){
document.getElementById("box").style.height = "100px";
});
</script>
</body>
</html>
For the second addEventListener, there's a typo.
In document.getElementByID, the D should not be capitalised.
A good way to debug these issues is to look at the console in developer tools.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I really don't know what I am doing wrong but my site just won't update the .innerHtml of the heading. There is no error in the browser console and console.log() returns the right string ("hhh").
Both elements with id = test and teet won't update their html
<html>
<head>
<title>
test title
</title>
</head>
<body>
<h1 id="teet">TEST HEADING</h1>
Search :
<input id="input">
<button onclick="load()" id="submit" type="button"> search </button>
<br>
<h1 id="test"> Test</h1>
<script>
function load() {
var test = document.getElementById("test").innerHtml = "hhh";
console.log(test);
}
</script>
</body>
</html>
It's innerHTML with capital letters
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>
Event Handling
</title>
</head>
<body>
<h1> This is the chapter in which I am handling Events.The site you should visit is: </h1>
<b>here<b>
<script src="events.js"></src>
</body>
</html>
The javascript is like this:
var link = document.getElementsByTagName("a")[0];
link.onclick = MyEventHandler;
function MyEventHandler()
{
alert("ouch!");
return false;
}
It is not working, but using inling event handler I am doing it successfully. Please helop me.
You need to assign the event handler function, not the return value of calling that function.
link.onclick = MyEventHandler;
(Also note that you need to use the end tag </script> not </src>.)
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
EDIT Here is new code but it is still not working for me.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<script src="myjavascript2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button onclick="myFunction()">Play</button>
<p id="test"></p>
</body>
</html>
Javascript:
var things = ['rock','paper','scissors'];
function myFunction() {
var i = Math.floor(Math.random()*things.length));
document.getElementById("test"+(i+1)).innerHTML=things[i];
}
I added this text so that it would let me post the edit, please ignore this.
You could simply replace your whole code with
var things = ['rock','paper','scissors'];
var i = Math.floor((Math.random()*things.length));
document.getElementById("test").innerHTML=things[i];
This would also let you more easily deal with other operations, like finding a winner.