Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle, where I have selected no-wrap <body>.

However, when I try the same code from my editor (Netbeans), it does not work. I have the JavaScript code in a separate file and the jQuery library added in the head.

Here is my jsFiddle

var addition = 1;
var now = new Date(); //set time
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var date = (day) + "." + (month) + "." + now.getFullYear();

function add() {
   var operationTitle = $("#title").val();
   var rowType = $("#type").val();
   var urgencyLevel = $("#urgency").val();
   

   $("#insertion").before("<tr id='new'><td>" + addition + "</td><td>" + operationTitle + "</td><td>"      + rowType + "</td><td>" + urgencyLevel + "</td><td>" + date + "</td></tr>");

     addition = addition + 1;
   };
    $("table").delegate("tr", "click", function () {
       $(this).addClass("highlight");
    });

    $("#remove").click(function () {
       $(".highlight").hide();
    });
javascriptjqueryhtmlcss

Answer №1

...while using jsFiddle, I have opted for no-wrap.

You specifically selected No wrap - in <body>.

However, when trying the code from my editor (Netbeans), it does not work as intended. My JavaScript code is in a separate file and jQuery library has been added to the head section.

(emphasis mine)

The issue lies in placing them inside the body instead, just before the closing </body> tag.

If scripts are placed in the head, none of the DOM elements in the body exist at the time when the script runs since scripts run when encountered* and elements may not have been created yet. Moving the script to the end of the body ensures all elements exist by that point. This allows you to interact with them, attach event handlers, etc.

If there was a necessity to place the scripts in the head, you could utilize jQuery's ready function, which delays execution until the DOM is "ready." However, this is generally used in situations when control over the placement of the script tag is limited.

* "scripts are run when they're encountered" — unless async or defer attributes are used and supported by the browser.

Unless there are specific reasons to do otherwise, following the usual layout (recommended by YUI Best Practices and Google's Closure library engineers, among others) involves putting CSS in the head and scripts at the end of the body, such as:

<!doctype html>
<html>
<head>
<meta charset="UTF-8"><!-- Specify your desired charset -->
<title>Your title</title>
<!-- `link` and/or `style` tags for CSS -->
<!-- other content within `head` -->
</head>
<body>
<!-- main body content -->
<!-- include script tags here -->
</body>
</html>

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

Is there a way to resolve the issue of my localStorage getting overridden on page refresh?

I am currently working on a simple React app and encountering an issue with the localStorage. Whenever I refresh the page, the todo list stored in the localStorage disappears. How can I ensure that the todos remain visible even after a refresh? Any sugges ...

javascriptreactjsnext.js

Quick method to assign child iframe title as index.html <title>title</title>

Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...

javascriptjqueryhtmliframetitle

How to handle an unexpected token error when using a function within another function in

I'm encountering an issue where the function below is placed above my render function. It doesn't seem to allow me to nest a function within another function. Can you help me identify what's causing this problem? onSelected(i){ this.st ...

javascriptreactjs

The functionality of CKEditor is compromised when used in conjunction with React Material-UI

I've been struggling with integrating Material UI and CKEditor5. The issue I'm facing is that CKEditor doesn't seem to be working properly. Despite trying to apply editor features like bold or italic, nothing changes on the screen. However, ...

cssreactjsmaterial-uickeditorckeditor5-react

Update the div element without needing to reload the entire page

Is there a way to reload a div tag without refreshing the entire page? I understand this question has been asked before, but I want to make sure I have a clear understanding. <p>click HERE</p> <div class="sample"> <?php functi ...

javascriptphpjquerycss

Is it possible for JavaScript to access and read a local file from a web page hosted locally

I am interested in using html, css, and javascript to develop a user interface for configuring a simulation. This interface will be used to generate a visualization of the simulation and an output parameters file based on multiple input files. It is impor ...

javascriptfilelocalhtml

Strategies for resolving the error "Cast to ObjectId failed for value"

<form action="" method="post"> <input type="password" name="password" placeholder="Type Your Password Here" required> <input type="hidden" name="user_id" value=&q ...

javascriptnode.jsmongodbexpressmongoose

Ways to showcase a JavaScript popup on an Android WebView

Can a JavaScript popup window be opened on an Android web viewer that is coded similarly to this example from Google? If so, how can this be accomplished without closing the original background page and ensuring it resembles a popup as shown in the picture ...

javascriptandroidwebviewpopup

Blockage preventing text entry in a textarea

To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness. However ...

javascripthtmlcsstextarearichtextbox

Functionality of the Parameters Object

As I transition from using the params hash in Rails to learning Node/Express, I find myself confused about how it all works. The Express.js documentation provides some insight: 'This property is an array containing properties mapped to the named rout ...

javascriptnode.jsexpress

Problem integrating multer with Express JS and Node JS

Click here to access the server.js file on GitHub Following a tutorial, I have implemented code accordingly. However, when working with an updated version of Express JS, errors are being thrown on the side of Express JS. Error C:\nodefiles&bso ...

javascriptnode.jsexpress

Exploring the power of Angular JS promises through ng-repeat

My current project involves fetching latitude and longitude coordinates from a postcode using an API, then utilizing those coordinates to retrieve data on street level crimes near that location on a specific date through the UK police API. However, I have ...

javascriptangularjs

Joomla website experiencing issues with Bootstrap popover functionality

Just wanted to share that I am currently working on this page: I found an example that inspired me from here: I have a feeling that Joomla might be including a resource that is causing conflicts with the popover not showing. This is the code snippet I h ...

javascripttwitter-bootstrapjoomlapopover

Basic node.js server that responds with HTML and CSS

I have successfully created a basic http server to send an HTML file as a response. However, I'm struggling with how to also send a CSS file so that the client can view the HTML page styled with CSS in their browser. Here is my current code: var htt ...

javascripthtmlcssnode.js

Ensuring a consistently positioned footer at the bottom

I understand that this might not seem like a significant issue, but I'm encountering some difficulties. In my main.html file, there are three divs. The first div contains the navigation bar, the second div is an "empty" div that uses JQuery/Javascript ...

javascriptjqueryhtmlcss

Place the Div in a consistent position on images of varying widths

I have a dilemma with my class that is supposed to display images. The issue arises when I try to place a div within an image inside this class. Everything works smoothly when the image takes up the entire width of the class, but as soon as the image widt ...

htmlcssangulartypescript

Browser refusing to acknowledge jQuery/JavaScript (bootstrap)

Here is where I include the necessary jQuery libraries and my custom jQuery code: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src= ...

javascriptjqueryhtmltwitter-bootstrap

Utilizing a JavaScript class method through the onchange attribute triggering

I am facing an issue with a simple class that I have created. I can instantiate it and call the init function without any problems, but I am unable to call another method from the onchange attribute. Below is the code for the class: var ScheduleViewer = ...

javascriptjqueryhtml

As I iterate through a MySQL array, JavaScript is able to manipulate the initial displayed data

I'm struggling to achieve the desired outcome with my code. It seems that when I iterate through an array of data, JavaScript only works on the first echoed data. Here is a snippet of the code: <?php $ids = array(); ...

javascriptphpmysqlarraysajax

AJAX is not meeting my expectations

Is there an issue with this code? It's supposed to insert data into the database but I'm not getting any errors. I am new to using ajax, and I found this code which I modified slightly. I thought it would work, but it's not functioning as e ...

phpjavascriptjqueryajax