This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
If width of the device visiting my site is <320 I want a <h3> to be removed. This is what I've tried with:
HTML:
<head>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<h3 id="title">Title</h3>
</body>
JavaScript:
if (document.documentElement.clientWidth <= 320) {
document.write("Testing");
var h3 = document.getElementById("title");
h3.parentNode.removeChild(h3);
}
The "testing" label is printed on the screen but the <h3>is still there. What's wrong?
At the time the script is executed, the h3 element has not been parsed, so it doesn't exist in the DOM.
Move the part of the script that removes it to after the h3 in the HTML.
Better yet, forget about using JavaScript and use media queries with h3 { display: none; } instead.
Related
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 10 months ago.
http://jsfiddle.net/384k9hng/1/
SO i have this demo that works great! But I put it in my website and it doesn't work!!!!
$('#test').hover(function() {
if ($('#hello:hover').length > 0) {
document.getElementById('hello').textContent = "A god like being, power swirls and mystifies beholder. Thousands of creations wander around the blank room. The room that seems to never end, that cannot be perceived by those other than the creator. The box confining those within, puppeteered by the being. The hands block those within from escaping, the hands of the creator";
} else {
document.getElementById('hello').textContent = "It pulls on it's chains";
}
});
<!DOCTYPE html>
<html>
<head>
</head>
<style>
div{
background: orange;
}
</style>
<body>
<div id= "chainbox" >
<h2> <I id = "chain" > "It pulls on it's chains" </I> </h2>
</div>
This is what i put into my website and it wont work. How do I fix it.
You need to have jQuery linked in the project before running a jQuery script in your project. That error means it isn't reading the $ symbol. Put this script tag above your jQuery script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
This question already has answers here:
How do I change the background color with JavaScript?
(22 answers)
Closed 2 years ago.
I'm trying to make a string in JavaScript that can be changed through a button later on. I want this string to contain colors for my index.html to use to change the background. How do I call the variable from JavaScript into HTML while still keeping the ability to change the variable at anytime and having the webpage update to display the changes. (sorry if this is confusing)
example:
script.js
var color = "";
index.html
<!DOCTYPE html>
<html>
<head>
<title>Type</title>
</head>
<body style="background-color:"color";">
<h1><center>Type</center></h1>
<p><center>This is a test sentence</center></p>
</body>
<script src="script.js"></script>
</html>
You could try something like this:
/* This is script.js */
var color = "black";
body {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Type</title>
</head>
<body onload="document.body.style.backgroundColor = color;">
<h1>
<center>Type</center>
</h1>
<p>
<center>This is a test sentence</center>
</p>
</body>
<script src="script.js"></script>
</html>
This sets the color inline, which is (sort of?) what I believe you wanted, except you just use the onload attribute instead of using the style attribute.
You want to bind the background-color CSS property to the JavaScript color variable, but there's no direct way to do that. Instead of updating a JavaScript variable, just update the background-color of the body element.
document.querySelector('body').style.backgroundColor = 'red';
There are a lot of JavaScript frameworks that support binding JavaScript data to DOM elements, but at the end of the day, they're all just copying values from JavaScript into the DOM, the same as we're doing here.
If you really want to have a JavaScript variable, you can have it, then call some function like updateBackgroundColor, that copies the color from the variable into the DOM.
This question already has answers here:
Is $(document).ready necessary?
(5 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I'm having a problem that has just now started happening for no reason. I'm playing around with a block that detects whether you are using Adblock. It sets a variable, var canRunAds = true; in a file titled ads.js which is not really ads but all adblockers will block it regardless. Next, somewhere in index.html tests to see if canRunAds is defined or not like this:
<DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../javascript/ads.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
if( window.canRunAds === undefined ){
$("#adblock_off").hide();
$(".adblock_off").hide();
console.debug("adblock enabled");
}
else {
$("#adblock_on").hide();
$(".adblock_on").hide();
console.debug("adblock disabled/nonexistant");
}
</script>
<div>
<img src="../images/adblock_off.png" id="adblock_off"></img>
<img src="../images/adblock_on.png" id="adblock_on"></img>
<p class="adblock_off">Thanks for disabling your adblock!</p>
<p class="adblock_on">Disable your adblock, no ads here!<p>
</div>
</body>
This has always worked for me, however it has stopped working. The script runs the console.debug and it shows up in the console, but the elements wont hide. Any explaination?
PS: This is all documented at this GitHub repo
This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 8 years ago.
When I launch this in chrome, nothing appears on the page.
<!DOCTYPE html>
<head><title>test 4000</title><head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
document.writeln("test")
</script>
</body>
</html>
you are inserting code in a script tag that you are also using to load an external script (jQuery). you should either do the one or the other.
<script>
document.writeln("test");
</script>
if you want both do:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
document.writeln("test");
</script>
the reference states:
If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.
you do not need to include jQuery to use document.writeln()
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
IE/Chrome: are DOM tree elements global variables here?
Element accessible with ID
I tried this code that is not expected to work:
<html>
<head>
<script>
function change() {
alert("changing !!"+dummy);
dummy.innerHTML="hello !!";
}
</script>
</head>
<body>
<div id="dummy" onclick="change();" > nothing good here !! </div>
</body>
</html>
And it seems to work fine (ff16, ie8, chrome) while dummy is not initialized like it should be via a document.getElementByID('dummy'); is this a html5 feature or just a edge effect?
Now All browser create global variable for each id present in dom. See my Question
dummy == document.getElemetById('dummy') // true