I'm trying to print output to console when a document is loaded. Below is the code I have written. But there's no output displayed.
var div = document.querySelector('#red');
document.addEventListener('DOMContentLoaded',function (){
console.log('event triggered...');
});
Output is displayed correctly when I use below code. Can you please explain me the reason for this behavior?
var div = document.querySelector('#red');
window.addEventListener('load',function (){
console.log('event triggered...');
});
My simple HTML:
<html>
<head>
<title>enlitle</title>
<link href='styleSheet.css' type='text/css' rel='stylesheet' id='linkElement' />
<script async type='text/javascript' src='scripts.js'></script>
</head>
<body>
<div id='blue'>
<div id='red'>
</div>
</div>
</body>
</html>
Related
When I load this page the script is not loading for some reason. What am I doing wrong here?
<html>
<head>
<title>hi</title>
<script language="JScript.Compact">
var script = document.createElement('script');
script.onload = function() {
alert("Script loaded and ready");
};
script.src = "http://192.168.1.106/js/min.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
</html>
I think it is working but the alert doesn't get triggered because the script you refer to isn't loaded. Try it like this:
<!DOCTYPE html>
<html>
<head>
<link media="screen" href="style.css">
</head>
<body>
<p>…</p>
<img src="file.jpg" alt="" />
<script src="responsive-nav.min.js">
<script>
window.onload = function () {
console.log('Document loaded.');
function init();
function dosomething();
}
</script>
</body>
</html>
<script language="JScript.Compact">
The language attribute is obsolete, but browsers still support it.
Since you set it to an unrecognised language, browsers don't know how to execute it, so they ignore it.
Remove the language attribute.
I've a landingpage with dynamic html tags.
The Problem is, that i can't select directly the tag. Its a link.
the following code is the construct:
<div id="testid"><div><div>Button 1<div><div><div>
Every time someone clicks on the link (a-tag) I want to fire an event like the following code:
Button 1
the question: what is the Javascript code to add the onclick="dataLayer.push({'event': 'button1-click'}) attribute to the a tag.
I tried the following code:
var d = document.getElementById("testid").firstchild;
d.setAttribute("onclick", "dataLayer.push({'event': 'button1-click'})");
but it seems to the code is incorrect. The a tag is also not the first child; there are 2 divs between :(
Use querySelector and addEventListener:
document.addEventListener('DOMContentLoaded', function () {
var dataLayer = [];
var d = document.querySelector("#testid a[name=button1]");
d.addEventListener("click", function () {
dataLayer.push({ 'event': 'button1-click' });
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="testid">
<div>
<div>
Button 1
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
There's a few things you were missing from your JS.
Using a more specific selector (#testid a[name=button1] vs. the firstchild of #testid, which was not accurate).
Wrapping all the code in a DOMContentLoaded listener. JS that depends on elements on a page needs to wait for the page to build first, that's what DOMContentLoaded is.
Check out my solution. Hope this helps.
var d = document.querySelector("#testid a");
var dataLayer = []
d.onclick = function () {
dataLayer.push({'event': 'button1-click'})
console.log(dataLayer.length)
}
<div id="testid"><div><div>Button 1<div><div><div>
I wan't to inject a .css on a page by clicking a button on my extensions!
Here is the popup.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/popup.css">
<script type="text/javascript" src="black.js"></script>
<script type="text/javascript" src="white.js"></script>
</head>
<body style="width: 400px">
<h1>test v1.0.0</h1>
<hr ></hr>
<input type="button" onclick="black" value="Black"/>
<input type="button" onclick="white" value="White"/>
</body>
</html>
And here is the black.js (white.js is almost the same):
function black() {
var browserListener = function(tab) {
chrome.tabs.insertCSS(tab.id, {
file: "css/black.css"
});
}
}
I don't know why but it's not working.
You can also try:
var blackCss = document.createElement('link');
blackCss.src = "css/black.ss";
blackCss.rel = "stylesheet";
document.head.appendChild(blackCss);
Of course, you can wrap that in a function and make the src path dynamic.
There are lots of ways of doing this literally LOTS ive come up with 1 solution but now that i think of it its probably not best but it works.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>test v1.0.0</h1>
<input id="black" type="button" value="Black"/>
<input id="blue" type="button" value="Blue"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function(){
$('#black').on('click', function(){
var location = 'black.css';
var link = $("<link rel='stylesheet' href='"+ location +"'>");
$('head').append(link);
});
$('#blue').on('click', function(){
var location = 'blue.css';
var link = $("<link rel='stylesheet' href='"+ location +"'>");
$('head').append(link);
});
})();
</script>
</body>
</html>
You could go so much further with this and make it 1 function that just changes the value of the href tag on the css link. but this also works fine. I wouldn't recommend using this exact code but im hoping you get what im trying to show here
I am trying to fire an event whenever a user clicks / declicks a radio button
Searching on stack overflow and trying out my own example on jsfiddle works.
However the same thing in a MOzilla Browser version 31 or Google chrome it fails - not sure why
I am using JQuery 2.1.1
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
</head>
<body>
<input id='r1' type='radio' class='rg' name="asdf"/>
<input id='r2' type='radio' class='rg' name="asdf"/>
<input id='r3' type='radio' class='rg' name="asdf"/>
<input id='r4' type='radio' class='rg' name="asdf"/>
</body>
<script>
alert("1");
$(".rg").change(function () {
alert("yahoo");
});
alert("2");
$("#r1").change(function () {
alert("yahoo");
});
</script>
</html>
May be your jquery-2.1.1.min.js path is wrong, check you path and include it. If you don't know the path or you have not downloaded the library then you can include like this :
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Also put your jQuery code inside ready function like this :
$(document).ready(function(){
$(".rg").change(function () {
alert("yahoo");
});
$("#r1").change(function () {
alert("yahoo");
});
});
You are not making function in a proper way. Make it this way.
$(function(){
$(".rg").change(function () {
alert("yahoo");
});
})
$(function(){
$("#r1").change(function () {
alert("yahoo");
});
})
Do you got any error in your console ?
If there is any error in your browser console post here
Try to put your code in $(document).ready();
Change the script src and link href to following it will work fine:-
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
Starting a new site and can't get any jquery to fire. I've tried just executing some in the console in browser to test, moved from external jquery to inside the <head> and can't get anything. It isn't even seeing that first function as existing. I've a feeling it's something so stupidly simple I'm overlooking, but I'm just exhausted from looking over the same <100 lines. One of the errors I try when manually getting the width is this.
Failed to execute 'querySelector' on 'Document': '[object Window]' is not a valid selector."
Suggestions?
<!DOCTYPE HTML>
<html>
<head>
<script href="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script href="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<title>Daniel Jenkins</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:700' rel='stylesheet' type='text/css'>
<script>
function set_container_sizes(){
console.log("Setting div sizes");
var window_width = $(window).width();
console.log("Window is "+window_width+"px wide");
var window_height = $(window).height();
console.log("Window is "+window_height+"px tall");
$('#outer_container').css('max-height',window_height+'px');
$('#outer_container').css('max-width',window_width+'px');
}
$( document ).ready(function(){
console.log("Document now ready");
set_container_sizes();
});
$( window ).resize(function(){
console.log("Window resized");
set_container_sizes();
});
</script>
</head>
<body>
<div id="outer_container">
<div id="inner_top">
<div id="top_head">
Daniel L. Jenkins
</div>
</div>Hello there <div id="inner_bottom">
</div>
</div>
</body>
</html>
The issue is that you are using "href" inside the script tag instead of "src".
I think it should be <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>