This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I recently started to learn jQuery so I had some exercices to do. This one is about displaying messages by clicking on page element. Here is the code :
var $caption = $('caption');
$caption.on('click', function(event) {
$(' <td>Wp it worked</td>').insertAfter('tr');
});
<!DOCTYPE html>
<html>
<head>
<title>Happy Birthday !</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<table>
<caption>Click here</caption>
<tr>
</tr>
</table>
</body>
</html>
So the problem is that it doesn't work. When I write the script in the console it works perfectly, but with the js file it basicly doesn't. So I know it's not a problem of folder because when I put something like alert('test'); in the js file it works. Someone knows why ?
it is working in the snippet , however you may try this.
$(document).ready(function () {
var $caption = $('caption');
$caption.on('click', function (event) {
$(' <td>Wp it worked</td>').insertAfter('tr');
});
});
Related
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 can't find element by id? [duplicate]
(5 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
i cannot find answer to my question in someone else post so here it is:
getElementById return null in java script file (also while testing in console) but work in html file
HTML file
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body>
<p id="stuff">Some text</p>
</body>
</html>
JS file
var title = document.getElementById('stuff');
console.log(title);
title.style.color = "#D4F34A";
You can add a callback function for the document event DOMContentLoaded event like so, and inside that function do your desired code:
//Add this into your script file, and anything you want to have execute once the document
//is fully loaded go inside of the function
document.addEventListener("DOMContentLoaded", function(event) {
var title = document.getElementById('stuff');
console.log(title);
title.style.color = "#D4F34A";
});
This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 4 years ago.
just start learn web dev ..
i created two files
- html file
- js file
the js file i wrote code:
function func1()
{
alert("alert message");
//document.writeln("document write line");
//console.log("this is log message");
}
The html file code:
<html>
<head>
<script type="text/javascript" src="basicFile.js"/>
</head>
<body>
<script>
func1();
</script>
</body>
Why the alert does not popup ?
also the doc.writeln does not work.
When i write the js func1 directly on the html - its work fine
Because you need to close script tag differently. Do
<script type="text/javascript" src="test.js"></script>
instead of
<script type="text/javascript" src="test.js" />
This question already has answers here:
javascript code not work in HEAD tag
(5 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I was recently introduced to Web Storage on my current course and have been tasked with taking input from a text field (input) using a button, then creating a key and value for this text field data. It seemed rather trivial. I produced some code in attempt to get it working. However the code did not work as expected.
Here is the (non-working) code I managed to produce:
HTML:
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="app.js" charset="utf-8"></script>
<meta charset="utf-8">
</head>
<body>
<p>Forename:</p>
<input type="text" id="FName"><br>
<button type="button" id="Submit">Submit</button>
</body>
</html>
JS:
var SubmitButton = document.getElementById('Submit');
var TextField = document.getElementById('FName');
SubmitButton.addEventListener('click', function(e){
ToTextField();
});
function ToTextField(){
var input = document.getElementById("FName").value;
localStorage.setItem("Text", input);
}
Though this code does not work, I have analyzed the developer tools tab in my browser (Firefox), and noticed that I get the following error:
TypeError: SubmitButton is null [Learn More] app.js:6:1
If I then enter the following lines of JS into the Console (which are the same in my file), the submit button seems to work as I expected it. I can't figure out the problem:
var SubmitButton = document.getElementById('Submit');
SubmitButton.addEventListener('click', function(e){
ToTextField();
});
Can anyone spot the problem I am having here?
Thanks :)
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 6 years ago.
I was copying the code from this website http://codepen.io/githiro/pen/ICfFE to use for my website and i've got an error. The very first function starts with $, $(function(){ however when I put this through and open it up on google it gets an error saying $ is undefined. I should also point out that I have called the jquery.
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="script.js"></script>
<script src="jquery-2.2.2.js"></script>
<title> What Instrument are you? </title>
</head>
How would I fix this?
Thanks for your help!
You need to add jQuery to your page before your main script body.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
open it up on google it gets an error saying $ is undefined
This generally means that your jQuery reference is missing. Ensure that you include it prior to the <script> tag that contains your jQuery code :
<!-- Example CDN Reference to jQuery -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
// Your code here
});
</script>