This question already has answers here:
javascript function name cannot set as click?
(6 answers)
Closed 6 months ago.
I have a relatively trivial problem, that has caused me to get stumped for a few hours
I am trying to get my button to call a JavaScript function that logs to console
Here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="script.js"></script>
<meta charset="UTF-8">
<title>McKinsey Prep</title>
<div>
<button onclick="click()">Some Button</button>
</div>
</head>
<body>
</body>
</html>
The button here is calling the click() method in this JavaScript file
console.log("Code has reached here")
function click(){
console.log("Button was clicked REEEEe")
}
The script.js file only has this function, I DO NOT want to execute code in my HTML document
When I run my index.js it prints the first print statement but the console.log in the function call does not appear on console when I click my button
NOTE
I am left clicking my index.html and pressing run to run my code.
What could be the issue?
Click() is a reserved name, you can't use it on a function because there is a native method on JS with that name.
Change the name of your function and try again.
Here is an example
<button onclick="clicked()">Some Button</button>
function clicked(){
console.log("Button was clicked REEEEe")}
The name of the function, click, is the issue. click is not a reserved word in JavaScript but the name does exist elsewhere in the scope where the onclick handler runs. You have 2 options:
Change the function name (doClick, for example).
Qualify the function name by referring to it as window.click in the onclick handler: onclick="window.click()"
There's a much more in-depth explanation here: javascript function name cannot set as click?
Unrelated to this, but something that could confuse someone during debugging: In your example code, your <div> is inside the <head> part of the HTML page. That content should actually be in the <body> section below, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="script.js"></script>
<meta charset="UTF-8">
<title>McKinsey Prep</title>
</head>
<body>
<div>
<button onclick="doClick()">Some Button</button>
</div>
</body>
</html>
Related
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ATM Interfacetest</title>
<link rel="stylesheet" type="text/css" href="css/rahmen/rahmen.css">
<script>
function testwindow(){
var tmp = document.createElement('div');
tmp.id = 'idtest';
tmp.className = 'classtest';
document.getElementById('xbuttonsHeinz-Ulf').appendChild(tmp);
document.getElementById('idtest').addEventListener('click', test(), false);
}
function test(){
alert('Alarm!');
}
</script>
</head>
<body onload="testwindow()">
<div id="xbuttonsHeinz-Ulf" class="xbuttons">
<div id="schließenHeinz-Ulf" class="symbol">x</div>
<div id="minimierenHeinz-Ulf" class="symbol"> - </div>
<div id="maximierenHeinz-Ulf" class="symbol">□</div>
</div>
</body>
</html>
Drives me crazy. Trying to add the Eventlistener makes the test() function to be excuted directly, without waiting to clicked.
Whats my mistake.
I searching for a good idea to dynamically create html tags with option to add eventhandlers.
Trying:
tmp.onclick = test();
also executes the function directly w/o waiting for a click.
Given the expressions
test() - the result of a call to the function test with no
arguments passed.
test - a reference to the function test.
You want the latter. The former calls test as soon as the line is reached. addEventListener(...) wants a reference to an EventListener, not the result of the handled event.
This is my scala.html file code.
#()
<!DOCTYPE html>
<html>
<head>
<title> Spin To Win </title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/styles.css")">
<script type="text/javascript" src='#routes.Assets.versioned("scripts/test.js")'></script>
</head>
<body>
<h1> This is title </h1>
<input type="button" value="click" onclick="showAlert()">
</body>
</html>
This is my javascript file.
function showAlert() {
alert("Hello");
}
This is the file directory where the javascript is stored.
Output
CSS works correctly.
But Javsascript doesn't work. Nothing happens when I click the button.
Update
So if I just put a alert in the test.js outside of any function, it works. The alert is displayed when the page loads.
alert("hello");
So, this means the js file is linked properly.
But if I put the code in a function like earlier and link it to a button it doesn't work.
You aren't actually executing your function.
Your code should be:
function showAlert() {
alert("Hello");
}
showAlert();
For buttons, it should be:
<button onclick="showAlert()">Button</button>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
First I'm sorry, because I'm certain that this has been asked many times, I just don't know how to search for this.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<button type="button" onclick="hello()">test1</button>
<button type="button" id="test2">test2</button>
<h1 id='myText'></h1>
<script type="text/javascript">
function hello() {
document.getElementById('myText').innerHTML = 'test1';
}
document.getElementById('test2').onclick = function(event) {
document.getElementById('myText').innerHTML = 'test2';
}
</script>
</form>
</body>
</html>
This is my code. Before this version the whole script-tag was within the head area, and only test1 worked, test2 did nothing.
Can you point me on where to read up on why that is so?
Also, is there a preferred method of the two, to trigger an event?
It's the order in which the elements are processed.
In very simple terms: stuff in <head> loads up before the stuff in <body>, likewise, stuff at the top of <body> will load before stuff at the end of <body>. For this reason, where you're trying to grab an element with an ID of test2, your #test2 event handler will only work when the #test2 button has been loaded before your <script>; otherwise it simply doesn't exist on the page at this point.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
document.getElementById() doesn't work? [duplicate]
(7 answers)
Closed 7 years ago.
im new to javascript and want to fill a div with some text. but it doesn't work.
in the documentation this is the common way to do this. but, why doesn't work this for me?
my code is
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
You need to move your script to the end of your HTML. Right now, you're executing the script BEFORE your HTML has been parsed so the document is empty and thus document.getElemntById('mytest') does not find anything.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</body>
</html>
See this other answer for a lot more discussion of this issue and other options if you don't want to move your <script> tag:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
thats because, in your document, the javascript is load at the first, but the div with the id mytest is not loaded at this moment.
you have 2 options to get this working:
first: say javascript to wait until the dom is loaded completly
window.onload=function(){
document.getElementById('mytest').innerHTML="hey";
}
second:
put your script code at the bottom, so the javascript is loaded at least.
but i would prefer the first solution.
best
Try in this way
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
</body>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</html>
Js fiddle
I have the following two HTML Documents:
Main.html
<html lang="eng">
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
var ExamId = "001A";
function open_exam()
{
window.open("exam.html")
}
</script>
</head>
<body>
<input type=button value="Open Exam" onclick="open_exam()">
</body>
</html>
Exam.html
<html lang="eng">
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function setParentInfo()
{
window.parent.document.ExamID = '001B';
}
</script>
</head>
<body>
<p>Welcome to the Exam!</p>
<input type=button value="Set Parent Info" onclick="setParentInfo()">
</body>
</html>
Main.html brings up Exam.html via the input button. From inside Exam.html I would like to change the variable ExamID on the parent document (i.e.: Main.html). I'm trying to do this via the JavaScript function: setParentInfo().
The above code is not working. Can someone help me come up with the correct code?
Thanks So Much!
Variables are assigned on the window object, not the document object.
Since the value is already set, you can instead read the existing value to verify it:
alert(window.parent.ExamId); // == "001A"
Variable is declared and assigned in parent window so you get reference from your child window.
you can test using alert statement:
alert(window.parent.document.ExamId);
//output::001B