This question already has answers here:
addEventListener not working in javascript
(3 answers)
Closed 8 years ago.
I'm not sure why this isn't working... I'll post what doesn't work first, then I'll post what does work underneath it:
This didn't work:
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('theButton').addEventListener("click", function() {
document.getElementById('myAnchor').innerHTML="<label for=\"Name\">What is your name?</label><input type=\"text\" id=\"Name\"/>";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
});
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" id="theButton" value="Change link">
</body>
</html>
This did work:
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="<label for=\"Name\">What is your name?</label><input type=\"text\" id=\"Name\"/>";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
I tried this with my little adjustment to the innerHTML at:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml
The main problem is script is load before myAncor object. Therefore you cannot get it with document.getElementById function. You should call this function after load page DOM object.
If you append the script in head, before the html, the html doesn't exists yet when you try to add the event listener. So you need to wrap it in a onload:
window.onload=function(){
//your code
}
Related
I have 3 html files that I want to link together. The three files are button.html, option1.html, option2.html and all three files are stored in one src folder.
The button.html is a simple webpage that contains two buttons:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">
document.getElementById("option1").onclick = function () {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function () {
location.href = "./option2.html";
};
</script>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
</body>
</html>
and the two other .HTML file are regular pages each w/ different content.
<!DOCTYPE html>
<html>
<head>
<title>Option 1/2</title>
</head>
<body>
// different data contained for option1.html and option2.html
<h1>Heading for Option 1 or 2</h1>
<p>Paragraph for Option 1 or 2</p>
</body>
</html>
I'm not sure what I'm doing wrong but even with the onClick() functions for each buttons, the buttons won't link to the other HTML files.
I'm wondering if I should have some kind of link tag in the header for the two HTML files. Also, I'm not very certain about that location.href line does in the script tag of button.html file. I just found some resources online to try this out.
Also, I need to do this using ONLY Vanila Javascript, HTML and CSS.
Please help me out. Thanks!!
UPDATED : This will work, I believe. See, first of all, always add your script tag just before the closing body tag. The reason is because that, the code will not work in case the DOM elements it looking for would not have been rendered.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
<script type="text/javascript">
document.getElementById("option1").onclick = function() {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function() {
location.href = "./option2.html";
};
</script>
</body>
</html>
You need add the script tag before closing body tag.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
<script type="text/javascript">
document.getElementById("option1").onclick = function () {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function () {
location.href = "./option2.html";
};
</script>
</body>
</html>
There is this thing called a same origin policy https://javascript.info/cross-window-communication#can-t-get-but-can-set which could be affected by location.href, if you are previewing the files in the local storage as opposed to a web server. Try changing it to location="./option.html" etc, removing the hrer
Alternatively you can make an invisible a tag, set the hrer, and click it with JS
var a=document.createElement("a");
a.href="option1.html";
a.click() ;
and put that in your onclick function instead,
EDIT another thing just realized
The script tags are in the head part of the html, but the buttons are in the body, so try copying the script tags to the bottom of the body tag, underneath the buttons, or surround both onclick functions with window.onload=function {/*other code goes here*/}
This question already has answers here:
How to add onload event to a div element
(26 answers)
Closed 6 years ago.
This fires the onload event:
<!DOCTYPE html>
<html>
<body onload="alert('Hello')">
<p> Demo </p>
</body>
</html>
This does not fire the onload event:
<!DOCTYPE html>
<html>
<body>
<p id="demo" onload="alert('Hello')"> Demo </p>
</body>
</html>
In the second example, why is the event not firing?
The elements that support onload are
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
A way to access any other element on load could be by adding a script tag, like below, though it depends very much on what you want to achieve
<!DOCTYPE html>
<html>
<body>
<p id="demo"> Demo </p>
<script>console.log( document.getElementById('demo').textContent );</script>
</body>
</html>
the onload property/event is only for the body, if you want to make some modifications to the <p> you should do it in a function defined in the body onload property
This question already has answers here:
How do I set/unset a cookie with jQuery?
(18 answers)
Closed 6 years ago.
Passing of values from one html page to another html page using javascript
And below is my code:
Fisrt page as html1.html:
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
{
window.location.assign("html2.html");
}
</script>
</head>
<body>
<input type="button" value="submit" onclick="newDoc ()">
</body>
</html>
And the second html code as html2.html:
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
{
window.location.assign("html1.html");
}
</script>
</head>
<body>
<input type="button" value="submit" onclick="newDoc ()">
</body>
</html>
In html we can load other files into one html file using Iframe
<body>
<iframe src="html2.html">
</iframe>
</body>
We can use jquery function to load the file into some specific div.
<script>
$(function(){
$('#header').load("header2.html");
});
</script>
In javascript, window.location object has a search attribute. So, if your location is http://example.com/html1.html?foo=bar then your window.location.search is ?foo=bar (console.log(window.location)).
How to parse search string: How can I get query string values in JavaScript?
If the variable that you want to pass is important for your application, maybe it will be better to store it in localStorage/sessionStorage or a cookie.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
For a project I'm working on I'm adding records to a list. But a button in the added content does not execute the javascript it is supposed to execute.
I've made a scribble out of it - as simple as I could make it - to demonstrate.
The button "some content to click" fires of an alert like I expect. The button 'some other content to click' does not.
I suspect this has to do with the html not being there on load... but I'm clueless on how to solve this.
Anyway... if you guys are willing to help... here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>scribble</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$('.clickme')
.click(function () {
list = $(this).parents('.container').find('.list');
list.prepend('<div class="record"><button class="record_button">some other content to click</button></div>')
alert('added a record');
});
$('.record_button')
.click(function () {
alert('content clicked');
});
});//]]>
</script>
</head>
<body>
<div class='container'>
<button class='clickme'>add record</button>
<div class='list'>
<div class='record'>
<button class='record_button'>some content to click</button>
</div>
</div>
</div>
</body>
</html>
Try
$('.clickme').on('click',function()..
Listeners don't work for added elements unless you call them like so.
jQuery .on()
This question already has answers here:
$(document).ready equivalent without jQuery
(39 answers)
Closed 8 years ago.
I have the following code
<html>
<head>
<script>
document.getElementById("txt").innerHTML = "Hello";
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>
and of course the text "Hello" isn't displayed because it's before the div. However because i use egl i can put js code only on head.
Is there any way to fix this?
You need to wait for your page to be ready before your code can execute on markup in the page. For example, use window.onload handler as in the example below. There are nicer ways to do this such as jQuery methods, but this will serve as an example of what you need.
<html>
<head>
<script>
window.onload = function ()
{
document.getElementById("txt").innerHTML = "Hello";
}
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>