JavaScript functions fire in codepen but not JSFiddle. Why? [duplicate] - javascript

This question already has answers here:
Why does jsfiddle throw error that function is not defined? [duplicate]
(1 answer)
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 6 years ago.
I'm trying to run a basic JavaScript function from an external file but I'm getting inconsistent results. Basically, I can't get a button's "onclick" event to fire when I put the script in an external JS page. I can get it work in CodePen:
CodePen
nonsense code
but NOT in JSFiddle:
JS Fiddle Examlple
I can always get it work when the script is part of the HTML page but I don't want to do that. Can you help? Thanks!

jsfiddle puts the javascript code in its own context:
//<![CDATA[
window.onload=function(){
function clickFunction()
{
alert("this is working");
}
}//]]>
But codepen puts the js in the global scope.

Related

How do I continue executing my .js code after programmatically adding jQuery to the DOM? [duplicate]

This question already has answers here:
How to include jQuery dynamically in any website using pure javascript
(9 answers)
Closed 25 days ago.
How do I continue executing my .js code after programmatically adding jQuery to the DOM?
The 3rd answer in this post shows how to add jquery to the dom but how should you continue executing further code?
For example you can't just add code underneath the self invoked function because jQuery hasn't yet loaded. How do I continue writing my .js code so that it executes?
$(window).on('load', function() {
// jQuery hasn't yet loaded so can't use this yet.
});
Execute the code that requires jQuery in the script's load event listener.
var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
jQueryScript.addEventListener("load", function() {
$(document).ready(function() {
...
});
});
document.head.appendChild(jQueryScript);

jQuery working in Console but not working in js file [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I am using the following jQuery code in the search bar of my website. Since I am a beginner, I am unable to relate to other code examples, hence I need help in fixing the code.
jQuery(document).ready(function ($) {
//Open Link in Search Results in New Window
jQuery('div.search_result_item_content').click(function () {
console.log("I am executed");
var menuLink = $('div.col.col-9.search_result_item_content').data('link');
window.open(menuLink, "_blank");
});
});
The code without .ready() seems to work on the console. But not on the index.js file of my website. The same file has many other jQuery functions, which are all working smoothly.
Any idea, what is causing the issue?
You are generating the items dynamically so this will not work. What you can do is what I will do below.
jQuery(document).ready(function ($) {
jQuery(document).on('click','div.search_result_item_content',function () {
console.log("I am executed");
var menuLink = $(this).data('link');
window.open(menuLink, "_blank");
});
That should work for you.

JS onpage/window load [duplicate]

This question already has answers here:
How to run a function when the page is loaded?
(11 answers)
Closed 6 years ago.
I want to run this script on pageload or after all the elements are loaded.
JavaScript
<script type="text/javascript">
function backgroundload (){
$(".portfolio-background-color")
var color = /#[0-9\A-F]+/.exec($(this).html())[0];
$(this).css('background', color)
}
window.onload = backgroundload;
</script>
i'm new to js please check if my code is okay and is it the correct way to load the js
All Javascript runs on page load. If what you mean is that you want it to run after all the elements in the page have been initialized, there are several ways:
window.onload
document.onload
body.onload
$(document).ready
There are more in-depth explanations of the support for the first three, and the differences between them, here. Documentation for $(document).ready is here.
However, in my experience, the easiest way to ensure that a script runs after all synchronously-loaded content is simply to place the <script> element at the bottom of the <body>.

$(.'class-name').click(function() {...}) ceases to function cross-browser? [duplicate]

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.
I'm uploading code from my project to Plunker. You can see it here. When I run the code through a local server and render it in Chrome, the functionality works fine. When I try to run it through Plunker the code fails.
This snippet is inside of script.js:
$('.navbar-toggle').click(function(){
alert('test1');
if ($(this).hasClass('login')) {
$('.navmenu-style1').css("z-index","1");
$('.navmenu-style').css("z-index","0");
}
else {
$('.navmenu-style1').css("z-index","0");
$('.navmenu-style').css("z-index","1");
}
});
How can I make it work in Plunker please? Is there a more universal bit of code that I can use or am I simply doing something wrong?
Cheers
You have made one of the most common mistakes anyone makes when using JQuery. You tried to attach a click handler to a DOM object before the DOM was loaded:
<html>
<head>
...
<script src="script.js"></script>
contents of script.js:
$('.navbar-toggle').click(function(){ ... });
You have to wait for the DOM to load before you run that code. Like so:
$(function () {
$('.navbar-toggle').click(function(){ ... });
});
Note: $(function) is just a shortcut for $(document).ready(function).

Function doesn't execute from an onclick inside the html [duplicate]

This question already has answers here:
JavaScript not running on jsfiddle.net
(4 answers)
Closed 8 years ago.
this is probably stupidly easy but I'm very new to JavaScript and it's driving me nuts.
My question, why doesn't this work:
http://jsfiddle.net/Ye9tG/
<input type="button" id="butt" value="Button" onclick="getThought();"/>
It works fine if I add the onclick directly into the JavaScript:
document.getElementById("butt").onclick = getThought;
Thanks in advance.
Your getThoughts function isn't defined, because your JavaScript is set to execute onLoad. See the dropdown menu in the upper left of jsFiddle. Select "No wrap - in <head>" to resolve the issue: http://jsfiddle.net/Ye9tG/1/
Also, always take a look at your browser's console to check for errors. In this case, you'll see a Uncaught ReferenceError: getThought is not defined error when clicking the button.
In the top left corner of jsfiddle you'll see that your fiddle is set to run your js code "onLoad". What that really means is that jsfiddle creates this for you:
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
// YOUR CODE HERE
}//]]>
</script>
As a result, your function is only accessible within that onload function. Change the value to "no wrap head" and you'll see that it works.
Your other option would be to make your function explicitly global:
window.getThought = function(){
// ...
http://jsfiddle.net/Ye9tG/5/

Categories