Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I am new to javascript and I am working on a simple function. I am trying to get a button to redirect to another webpage on click, and I am attempting to implement it through javascript/jquery. Although I get no errors in the console, the functions simply don't fire for some reason. I have also utilized an alert to test, and even the alert does not come up. Any help is appreciated. All files are correctly linked to the HTML document. The commented out code was my javascript attempt and that did not work either.
//document.getElementById("updateB").onclick = function() {updateButton()};
$("#updateB").click(function() {
updateButton()});
function updateButton() {
alert("Working");
window.location.href = "http://www.w3schools.com";
}
function deleteButton() {
window.location.href = "http://www.w3schools.com";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><button class ="buttonUpdate" id="updateB">Update</button></td>
<td><button class="buttonDelete">Delete</button></td>
I'm loading the scripts like this:
<script src="jquery-3.4.1.min.js"></script>
<script src="index.js"></script>
I think you should run the index.js inside the document ready function, button event listener would be added when the button is actually available. Until the dom is ready to button will not be available for the binding.
try adding a dom ready function and add your binding and other logic inside it.
$( document ).ready(function() {
$("#updateB").click(function() {
updateButton()});
});
https://learn.jquery.com/using-jquery-core/document-ready/
Happy coding.
Whenever you want to work with the DOM you have to make sure the DOM is ready by using JQuery's Document Ready function.
$(function(){
//document.getElementById("updateB").onclick = function() {updateButton()};
$("#updateB").click(function() {
updateButton()
});
});
function updateButton() {
alert("Working");
window.location.href = "http://www.w3schools.com";
}
function deleteButton() {
window.location.href = "http://www.w3schools.com";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><button class ="buttonUpdate" id="updateB">Update</button></td>
<td><button class="buttonDelete">Delete</button></td>
Try running your code once onload is emitted. You can learn about it here.
window.onload = () => {
console.log('your code should be run in this function');
}
Your code runs properly. Only pay attention that, you have a commented code in the beginning.
The button event is triggered, the only reason the page is not redirecting to the w3schools, is because the browser is blocking such action.
Please see the snippet working below:
function updateButton() {
alert("Working");
window.location.href = "https://www.w3schools.com";
}
document.getElementById("updateB").onclick = function() { updateButton();
};
<td>
<button class ="buttonUpdate" id="updateB">Update</button>
</td>
<td>
<button class="buttonDelete">Delete</button>
</td>
Thanks.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to run the function renews() with interval but want to run first time when the html is opened. so I wrote renews(); but it doesn't work. I could run other function of the code. but only this one doesn't.
Thank you for the help!
<html>
<head>
<script>
var i=0;
var u=0; //0:redy for the next FX
var newstext;
function renews() {
if(i%2==0){
newstext = "aaa";
} else {
newstext = "bbb";
}
document.getElementById("news").innerHTML = newstext;
i++;
}
//renews(); // this doesn't work
setInterval(function(){
renews();
},3000);
</script>
</head>
<body>
<span id ="news">test</span>
</body>
</html>
Move your script to the bottom of the body. When you execute your script, the DOM has not been build yet, and thus there is no element to operate on.
When you’re dealing with the DOM it’s important to execute your code only after the page is fully loaded. If you don’t, there’s a good chance the DOM won’t be
created by the time your code executes.
Now Let’s think about what just happened when your code run. you put your js code in the header tag of the page, so it begins executing before the browser even sees the rest of the page. That’s a big problem because that span element with an id of “news” doesn’t exist, yet.
So what happened exactly? The call to getElementById returns null instead of the element you want, causing an error, and the browser, being the good sport that it is, just keeps moving and renders the page anyway, but without the change to the DOM at the first time.
How do you fix this? Well, you could move your code to the bottom of the body, but there’s actually a more foolproof way to make sure this code runs at the right time; a way to tell the browser “run my code after you’ve fully loaded in the page and created the DOM.” Besides moving the code to the bottom of the body, there’s another—and, one might argue—cleaner way to do it with code.
Here’s how it works: first create a function that has the code you’d like
executed once the page is fully loaded. After you’ve done that, you take the
window object, and assign the function to its onload property. The window object will call any function you’ve assigned to its onload property, but only after the page is fully loaded. Check This out:-
<html>
<head>
<script>
var i=0;
var u=0; //0:redy for the next FX
var newstext;
function renews() {
if(i%2==0){
newstext = "aaa";
} else {
newstext = "bbb";
}
document.getElementById("news").innerHTML = newstext;
i++;
}
//renews(); // this doesn't work
window.onload = renews; //But this will work
setInterval(function(){
renews();
},3000);
</script>
</head>
<body>
<span id ="news">test</span>
</body>
Now even if you put your JavaScript code in a separated JS file and import it in the header tag instead of moving it to the end of the body your code will work just fine.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I just recently got into coding and decided to just mess around before I started fully coding more in-depth. I am currently trying to make a simple game where you click an object, it does a little animation and it adds 1 to a counter.
I have the animation perfectly executed, however I am completely lost as to how I could make the counter. I am trying to use .js via the tags, mainly because the website never loads my script.js file, even though I reference it properly.
Anyways here is my html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<h3>0 Clicks</h3>
<img id="choco" src="http://cdn.shopify.com/s/files/1/0210/5354/products/Chocolate_Chip_No_Background_1_medium.png?v=1365686508">
<img id="whirl" src="whirl.jpg" style="width:25em; height:25em;">
</body>
<script>
$(document).ready(function() {
('#cookie').click(function() {
function toClick(clicks){
return (clicks + 1);
print clicks;
};
});
});
</script>
</html>
My is very messy, I was trying a plethora of options to try and get it to work but it simply doesn't.
So basically what I am trying to do, is everytime I click the object I want it to add 1 to a counter I have on the page. 0 Clicks
I am not even sure that's possible but I hope someone out there can help me out :)
Thanks!
First, give your h3 an inner element that holds the click counter (and give that an ID so you can access it easily):
<h3><span id="clicks">0</span> clicks</h3>
Next - your click handler is missing the $ in front - but also has to get the current clicks, add 1, then re-print:
$('#cookie').click(function() {
var currentClicks = parseInt($("#clicks").text(), 10);
currentClicks++; //increment
$("#clicks").text(currentClicks); //set it
});
$(document).ready(function() {
$('#cookie').click(function() {
incrementCount();
});
});
function incrementCounter() {
var previousCounter = parseInt($("#counter").text());
previousCounter = isNaN(previousCounter) ? 0: ++previousCounter;
$("#counter").text(previousCounter);
}
function resetCounter() {
$("#counter").text(0);
}
Change HTML to
<body>
<h3><span id="counter">0</span> Clicks</h3>
The above code will look after even if you don't specify 0 with the Span.
I have just given you some bonus function - resetCounter too :)
Seems You are missing the $ sing in:
$('#cookie').click(function() {
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How do I detect if the page is fully loaded?
No jquery, and I don't want to place a script on the bottom of the page.
Use window.onload to "detect if the page is fully loaded" :
window.onload = function(){
...
}
But note the difference with placing the script at the bottom of the body, which would not wait for the page to be fully loaded but just to be ready. If you want the equivalent of placing the script at the end of the body, use the DomContentLoaded event :
document.addEventListener("DOMContentLoaded", function() {
...
});
You can use the window.onload or document.addEventListener functions:
There are 4 possibilities (options 1 and 4 could have an e parameter too)
window.onload = function(){
alert("Window loaded");
}
window.onload = myfunction;
function myfunction(){
alert("Window loaded");
}
window.onload = function(){ myfunction("Window Loaded") };
function myfunction(message){
alert(message);
}
Equivalent of jQuery $(document).ready() , meaning that the page is ready, and although not fully loaded, should be safe to manipulate.
document.addEventListener("DOMContentLoaded",
function(){
alert("DOM Content Loaded");
}, false);
You can do it by the following way
document.addEventListener('DOMContentLoaded', function() {
// Java Script Code
}, false);
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I can't seem to get my click trigger to work.
I've tried the following:
//Handle the Main Menu Button Press
$("button").click( function() {
alert('yep');
});
And I never get the alert when I click any button on my site....
Where did I go wrong?
might be one of these:
- you forgot to include jQuery.js script in your header
- you didn't wait till DOM loaded
try:
$( function() {
$("button").click( function() {
alert('yep');
});
});
Your code works just fine. Here is a fiddle
You need to ensure you have jQuery loaded, you have waited for the DOM to load using
$(function() {
//your code here
});
And if you have multiple buttons, you will need to use CSS selectors to differentiate.
I would HIGHLY suggest you read this document, provided by jQuery
The HTML could be
<button type="button" name="btnOk" id="btnOk">ok</button>
The jQuery code could be
$("button[type='button']").click(function(){
alert("yeap");
});
or
$("button[name='btnOk']").click(function(){
alert("yeap");
});
If HTML is
<input type="button" name="btnOk" id="btnOk" value="Ok"/>
the code could be
$("input[type='button']").click(function(){
alert("yeap");
});
At first, be sure that :has the jquery code in
$(document).ready(function(){
//jquery code
});
I have the following javascript -
function onLoad() {
if (!(document.applets && document.VLVChart && document.VLVChart.isActive())) {
setTimeout('onLoad()', 200);
return;
}
objChart = document.VLVChart;
PollEvent();
}
function fan() {
objChart.reorganize();
}
And then when the HTML page is loaded -
<body onLoad="onLoad()">
and have a button within the HTML that execute the fan() function -
<input type='button' value='Fan' onClick='fan();'>
Is it possible for me to activate the fan() function within the onload event so that a user does ont have to click the button?
EDIT
After trying the provided answers, on debugging the code breaks on the line -
objChart.reorganize();
Within the fan() function with the error -
SCRIPT5007: Unable to get value of the property 'reorganize': object is null or undefined
This is odd as when I manually click the button on the page, the function works fine.
Solution
After much head scratching I have realised that I was trying to load the fan() function before the page (and more specifically the objChart) had fully loaded. Hence why adding the function in the onLoad event was not working. I added a setTimeout -
function Fan()
{
setTimeout(function(){objChart.reorganize();},3000);
}
<body onload='onLoad(); fan();'>...
However inline JS is best avoided and you would do well to begin looking into centralised event management. There are various advantages to this.
An answer I wrote yesterday to another question outlines why this is. Something like jQuery makes this trivial if it's new for you.
$(function() {
$('body').on('load', function() {
onLoad();
fan();
});
});
Reading your question I assume you didn't even have tried. Just call that function from within your onLoad()-function:
function onLoad()
{
fan();
/* … */
}
Yes.
You can use <body onload='onLoad(); fan();'> as Utkanos suggests.
If you use jQuery, you can also stick a script in the head containing:
$(function(){
...
});
The jQuery function actually fires earlier, as is explained here.