Having trouble connecting HTML and JS in jsFiddle? Unable to call a basic function using a button?

Help! I can't figure out why my code isn't working as expected.

I've been trying to set up a jsFiddle, but for some reason, none of the JavaScript functions are being attached to the elements. For example, when I click on a button, nothing happens even though it should call my function.

It's frustrating because my fiddle is very basic and straightforward. I simply copied and pasted it from W3 editor where it was functioning perfectly - click the button and an alert pops up!

<button onclick="myFunction()">Click me</button>

function myFunction() {alert("sss");}

http://jsfiddle.net/tpip/NYkQN/2/

Can anyone help me troubleshoot this issue?

javascriptjsfiddle

Answer №1

If you want to make a change, simply adjust the way the JavaScript block is loaded to no wrap (head)

The default configuration loads the JS wrapped after the DOM has finished loading. This means that the function is not globally defined but enclosed within a wrapper. However, inline event handlers require globally defined functions to work properly!

By switching to no wrap (head), the JavaScript will be loaded in the <head> without being wrapped.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

javascripthtmlcss

What is the purpose of using double quotes within single quotes in JavaScript?

Could someone clarify the reason behind needing to nest double quotes inside single quotes in my Webpack configuration shown below? What is preventing using just double quotes? module.exports = merge(prodEnv, { NODE_ENV: '"development"', API ...

javascriptnpmwebpack

Is it possible to execute a JavaScript command before the function finishes its execution?

Is there a way to hide a button when a function starts, display some text, and then hide the text and show the button again when the function finishes? I'm struggling with this task because JavaScript doesn't output anything to the screen until ...

javascript

Working with JSON data in javascript

While trying to parse JSON data from a server, I came across a strange issue. The data consists of rows of data - essentially a list of lists - and it looks something like this: [[1,2,3],[4,5,6],[7,8,9]] When viewing the JSON data in FF (using Firebug), ...

javascriptjqueryjson

What is the best way to disable the appearance of an HTML checkbox?

Is there a way to make a checkbox readonly, but still have it appear disabled or grayed out? I want it to function like this: <input type="checkbox" onclick="return false;"> If anyone knows how to accomplish this, please share yo ...

javascriptjquerycss

Issue with AngularJS ng-if causing hidden elements to not respond to ng-select event

In my code, there is a hidden select input that is initially hidden using ng-if. Inside this hidden select, I have included a ng-change tag, which triggers a function to display an img element that is also hidden by ng-if. The element hiddenNinja is hidd ...

javascripthtmlangularjs

Identifying browser with appCodeName to apply specific CSS styling

My task was to detect which browser is being used and then load CSS files depending on the specific browser. I decided to accomplish this using JavaScript. However, I encountered a problem where regardless of the browser I use, it always displays "Mozilla" ...

javascriptjqueryhtmlcss

What steps should one take to address issues related to Datatables in Laravel and Vue?

I encountered an issue while trying to fetch data into a datatable in Laravel. I am receiving an error message stating "Uncaught ReferenceError: $ is not defined" on the console of the page. Is there a solution to resolve this problem? index.blade.php ...

javascriptlaravelvue.jsdatatable

Is there a way to maintain the second form's state when the page is refreshed using Vue.js?

I have a challenge in creating a web-app with only 2 pages. The first page requires filling out forms across two stages, but I am unable to create separate pages for this purpose. Is there a way to display two forms on one page and remain on the second for ...

javascriptvue.jsvuejs2

The specified property 'length' is not found on type OkPacket within the mysql2 module

In my code example below, I am simply showcasing a specific scenario: this.getCode = (code: string): Promise<codeObject | false> => { return new Promise((resolve, reject) => { pool.query('SELECT * FROM ?? WHERE code = ...

javascriptnode.jstypescriptnode-mysql2

Prevent UI-Router from Interacting with the browser's window location

Seeking input on a unique challenge regarding UI-router in AngularJS. In the process of migrating a project to Angular JS, I encountered an issue with multiple panels being dynamically loaded onto a page using AJAX and managed by jQuery History. Each pane ...

javascriptjqueryangularjsangular-ui-routerwindow.location

How to activate a single element within a React array

I am currently working on developing a comment system similar to the one found on YouTube. In my setup, when I click on modify, all comments turn into input fields, but only the selected input should be modified. How can I trigger only the element I clicke ...

javascriptarraysreactjs

The sequence of code execution is incorrect

Although I am aware of Javascript's asynchronous nature, I'm perplexed as to why this particular scenario is unfolding the way it is. At line 27 below, I invoke the 'GetProducer' function which is meant to fetch data for a specific pro ...

javascriptjqueryajaxjsonfunction

Tips for altering the appearance of a dropped item using JQueryUI sortable

I have a straightforward website where I need to implement the ability to drag and drop styled DIV elements between two containers. Utilizing JQueryUI's sortable function, this behavior was successfully achieved with the following code: $("#active-co ...

javascriptjqueryhtmlcssjquery-ui

Need a tool for validating forms?

I am currently facing some confusion with the UI Validation plugin that we are using. Within our application, we employ Spring MVC, Jquery & Bootstrap. As we delve into UI development, we have encountered uncertainty in selecting an appropriate Validation ...

javascriptjqueryformstwitter-bootstrapvalidation

Switching image sources using jQuery on click

Take a look at the code snippet I've assembled below: $('img').on({ 'click': function() { var src = ($(this).attr('src') === 'memes/2a.png') ? 'memes/2b.png' : ...

javascriptjqueryhtmlwebtoggle

Is there a way to interact with a DOM element through clicking and then pass it as a variable using PHP?

Is there a way to configure a table so that data from a specific row is sent to a PHP script and displayed in a section on the website when the user clicks on that row? I am looking to pre-fill a data entry form with information from a selected row, allow ...

phpjavascriptajaxformsweb

Experiencing difficulties with a cross-domain jQuery/AJAX service request

After extensively researching various threads both on this platform and elsewhere, I have been trying to successfully execute a cross-domain AJAX call. The scenario involves a Restful WCF service that simply returns a boolean value. The service is configur ...

javascriptjqueryjsonajaxwcf

Refresh numerous HTML <div>'s using data from a JSON object

Looking to automatically update the homepage of my website with the ten most recent "posts" from the server. Here's an example HTML format: <div id="post1"> <p id="link"> </p> </div> <div id="post2"> <p id="li ...

javascriptjqueryhtml

The Vuetify rating system seems to be having trouble displaying

I've integrated the Vuetify rating component into my app (https://vuetifyjs.com/en/components/ratings#ratings), but I'm facing an issue. Despite having Vuetify 1.5.5 installed and working with other components like buttons, the stars in the ratin ...

javascriptcssvue.jsvuetify.js