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

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/

Related

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

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.

javascript onclick not working in jsfiddle

I am trying to make jsfiddle , my onclick is not working in jsfiddle. what is wrong in my code
<input value="press" type="button" onclick="myclick()">
function myclick(){
alert("myclick")
}
http://jsfiddle.net/hiteshbhilai2010/gs6rehnx/11/
EDIT
I tried No wrap - In head and tried again with document.ready it is not working in jsfiddle again
ERROR - Uncaught ReferenceError: myclick is not defined
http://jsfiddle.net/hiteshbhilai2010/33wLs160/6/
I have checked with already existing question here but my problem is happening when I am trying it in jsfiddle
Can some one please help me ....thanks
You need to select No library (pure JS) and No wrap - in head. Then it will work as a simple HTML with javascript page.
This will be inserted in a <script> element in the <head>:
function myclick(){
alert("myclick")
}
See demo
As others said, for first case you have to set No wrap - in <head> or No wrap - in <body> as javascript panel settings (the blue link at js panel top-right).
For the second (your Edit) question, your code inside a function and the js will run it (within a new context), but it will do nothing as you just define a function and ignore it without any call or assignment.
if you call alert(myclick) you will see all the code is executed and its defined at that point. see this fiddle
$(document).ready(function() {
//alert("ready is executed");
function myclick(){
alert("myclick is called")
window.location.reload(true);
}
alert(myclick); //this will show the myclick is a defined function!
//document.getElementsByTagName("input")[0].onclick = myclick;
})
if you call this:
document.getElementsByTagName("input")[0].onclick = myclick;
in that $(document).ready({...}) scope, it will be assigned to the button and works as you wish.
<input value="press" id='a' type="button">
document.getElementById('a').onclick = function() { alert(1); }
http://jsfiddle.net/gs6rehnx/12/
This one is working. Just remove it from document ready event. Also semicolons are optional in javascript but i advice to use them.
function myclick() {
alert("myclick");
window.location.reload(true);
}
<input value="press" type="button" onclick="myclick();">
<script>
alert("home");
</script>
Here is the fiddle.
Select "No wrap - bottom of " in "Load Type" of the scripting panel.
This is the solution for Jsfiddle (till 17 december 2019).

Difference between 'onclick's within javascript vs. html [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.
<script type="text/javascript">
function translateIt() {
Microsoft.Translator.Widget.Translate("en", "es");
}
</script>
<button onclick="translateIt()">Translate</button>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
Microsoft.Translator.Widget.Translate("en", "es");
}
</script>
<button id="btn">Translate3</button>
This html block contains two buttons that should perform the exact same function. As such, the top button works but the bottom button doesn't. What is the difference between the 'onclick' implementation within html vs. within javascript?
The difference isn't with the click handler, the difference is the order of execution. In the first example you define something (the function) then reference it (in the HTML). In the second example you reference something (the HTML element) and then define it.
So in the second example the call to getElementById("btn") doesn't find anything, because at the time it executes that element doesn't exist yet.
HTML and JavaScript execute in the order in which they exist on the page as the page is being rendered. From the top of the document to the bottom.
If your second script example appears before the button, the getElementById will find no element.
By moving the script tag to after the element, it will work like normal.
<button id="btn">Translate3</button>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
Microsoft.Translator.Widget.Translate("en", "es");
}
</script>

button in jquery and jscript

I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.

Onclick event not firing (this is so basic, am i going insane?) [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
“uncaught TypeError: Object is not a function” in JavaScript
my full js file is this:
function addInning() {
alert("hello");
}
my html file has the element
<input name="addInning" type="button" value="Add Inning" id="addInning" onclick="addInning();">
and the code will not execute. for the life of me i cannot figure out why, as this is just about the simplest thing possible. the error from chrome is "Uncaught TypeError: object is not a function". I searched on stackoverflow and the solutions posted have not been helpful. i feel like i'm losing my mind.
full code here: http://jsfiddle.net/BUsPC/
The issue is that in onclick="addInning();", addInning is referring to the input element because that's the value set for its name and id attributes. This behavior seems to be prompted only when the input tag is a child of a form element.
This DEMO highlights that behavior.
To solve your problem, either change the name of both the input's id and name, or the name of addInning. Also, you could explicitly refer to the global function like this:
onclick="window.addInning();"
Take a look at your working fiddle using the latter option. Be careful with JSFiddle because it wraps all JS in an window.onload event by default. You could keep the default behavior by defining addInning like so:
window.addInning = function () {
alert("hello");
}​;​
I learnt something new!
Change the name and id from "addInning" to something else. This worked for me.
<script type="text/javascript">
function addInning()
{
alert("hello");
}
</script>
<input name="addInning2" type="button" value="Add Inning" id="addInning2" onclick="addInning();">
Since its a function, try returning something:
function addInning() {
alert("hello");
return true; // or return false; to prevent the click
}

Categories