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>
Related
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
I have many different MathJax formulas that are going to be dynamically moved around different lists on the webpage. I am trying to control this with JQuery and the append attribute.
In my script file I have various arrays of formulas and then a function that lists the formulas in the array inside of a specified div using .append. Here's the code:
function listArray(array,div){
for(var i=0; i<array.length; i++){
$('#'+div).append('<li>'+array[i]);
}
};
I am having the problem that MathJax typesets the math before this script runs and so the appended formulas don't display in TeX. Here is an example Fiddle:
http://jsfiddle.net/T8m64/92/
Does anyone know of a good fix for this? I have tried reading some of the documentation on re-typesetting MathJax, but I don't really follow it.
There are two problems with your fiddle example. First, the array of math expressions loses the backslashes, because these are used as escape characters in the javascript strings. You need to double them:
var jax = ['\\(\\mathbb{Q}\\)','\\(\\mathbb{Z}\\)'];
Second, you need to tell MathJax to process the mathematics once you have added it to the page. Use
MathJax.Hub.Queue(["Typeset",MathJax.Hub,div]);
after appending the math in order to do that.
Version 120 of you fiddle shows a working version.
I ran some tests as updates /93, /94, /95 of your fiddle, and found that the rendered formulas could be moved around but the whole thing was fragile. Sometimes a simple change or just a page refresh would cause the unrendered formulas to show, each one doubled-up, which I can't explain.
As you will see, I thought a setTimeout would fix things but now I don't think that's the case.
I think the bug is just a feature of running the code in jsFiddle. I can't induce the bug when running the code in a test page served locally under file:// protocol from my own computer and viewed in Opera.
Here's my test page :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test kineticJS lib - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
body {
margin: 10px;
}
.jax {
display: none;
}
#list1, #list2 {
margin: 10px 0;
padding: 5px;
border: 1px solid #000;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
function listArray($ul) {
$(".jax").each(function(i, j){
var li = $("<li/>").append($(j).text());
$ul.append(li);
});
};
//move formulas from original spans into list1
listArray($("#list1") );
//on click move formulas between list1 and list2
$("#moveUp").on('click', function() {
$("#list2 li").eq(0).appendTo($("#list1"));
});
$("#moveDown").on('click', function() {
$("#list1 li").eq(0).appendTo($("#list2"));
});
});
</script>
</head>
<body>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<span class="jax">\(\mathbb{Q}\)</span>
<span class="jax">\(\mathbb{Z}\)</span>
<ul id="list1"></ul>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<ul id="list2"></ul>
</body>
</body>
</html>
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 6 years ago.
I'm trying to remember how to associate HTML and JS through different actions, so I just wrote a simple reverse script (any number would be turned into a string and reversed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Number Reverser</h1>
<script>
function Reverser(n){
n = n + "";
return n.split("").reverse().join("");
}
function ExecuteRev(){
console.log(Reverser());
}
</script>
<input id="bubu">
<button onclick="ExecuteRev()">REVERSE 'EM</button>
</body>
</html>
The ridiculous part is that the console returned
denifednu
My genius JS level managed to reverse the error itself.
How I can connect the input to the function to be executed on the button press and displayed in a div (any div, not console)?
I'm not entirely sure what you mean but I think you might be talking about using the DOM. For instance, to update a div with id="x", do the following.
document.getElementById("x").innerHTML = "New content";
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.