Having trouble pinpointing the issue with my JavaScript code

Recently, I've been experimenting with JavaScript code snippets and after making some edits to one particular sample, I can't seem to figure out why it's not working. Everything appears correct to me, but here is the code snippet (JSFiddle)

https://jsfiddle.net/en2a8c1v/1/

function click(e) {
    document.body.style.backgroundColor='" + e.target.id + "';

}


document.addEventListener('DOMContentLoaded', function () {
  var divs = document.querySelectorAll('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', click);
  }
});

Answer №1

Before anything else, make sure to check in the JS settings that you have enabled no-wrap (I personally used no-wrap head) in the load type dropdown menu.

It's important to note that when using e.target.id, it is already a string variable. By setting the background color to "e.target.id", you are not specifying a valid color.

To correct this issue, simply update

document.body.style.backgroundColor='" + e.target.id + "';
to
document.body.style.backgroundColor= e.target.id;

I won't delve into why this method may not be ideal, presuming that you are experimenting with event handling.

Answer №2

If you're looking for a helpful tip, try using the CSS attribute: background-color:rgb(x,y,z);

An easy way to implement this is by doing the following:

document.getElementById("elementID").style.backgroundColor = 'rgb('+ this.red + ', ' + this.green + ', ' + this.blue + ')';

For instance, you can assign values to r, g, and b like so:

this.red = 0;
this.green = 255;
this.blue = 130;

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

React Pagination Component not displaying on User Interface

Implementing pagination in my react application has been a challenge for me. I followed this guide to create the Pagination.js file, but unfortunately, I can't see it reflected on my UI. You can view a screenshot of my application The Search Results ...

Disabling a checkbox within an onClick event handler

I'm facing an issue where I have a checkbox with the type "checkbox" and I'm using JAWS to read it. The problem is that in IE11, JAWS reads a disabled checked checkbox as unchecked, which I believe is a bug in IE. To work around this, I need to r ...

How does the object scope receive, process, and prepare the update for display within the AngularJs view?

AngularJS allows for data-binding to easily display immediate data in our View. This is made possible by the object scope, which acts as a connector between the Logic Code and The View. Additionally, AngularJs supports two-way binding. My question is: H ...

byte sequence displays as binary data (angular + express)

I've been working on pulling files from a back-end Node.js / Express server and displaying them in an Angular front-end. Despite trying different methods, I keep facing the same issue - the data displayed at the front-end appears as a bytestring. Even ...

Strange JSON.parse quirk observed in Node.js when dealing with double backslashes

My coworker encountered an issue while trying to parse a JSON string from another system, leading to unexpected behavior. To illustrate the problem, I have provided a simple code snippet below: // This code is designed for node versions 8 and above con ...

Transferring information using pure JavaScript AJAX and retrieving it through a Node API

On the client side, I have the following code: sendMail(e) { e.preventDefault(); var name = document.getElementById('name').value; var contactReason = document.getElementById('contactReason').value; var email = document ...

Can you create a dynamic visual display using HTML5 Canvas to draw lines in a circular pattern that react

I have successfully implemented drawing lines around a circle using the AudioContext API. However, I am facing an issue with the lineTo function, as the line only grows and does not shrink. My inspiration for this project comes from the audio visualizer fo ...

Tips for successfully retrieving a boolean value from an ASP.Net JavaScript AJAX request using a C# method

Query: Is there a way to call a C# function from JavaScript code on an .aspx webpage to get authentication results based on a username and password? Here is the JavaScript AJAX POST request I am currently using: $.ajax({ type: "POST", ...

Speaking about the `this` Vue component in an event listener context

Consider this Vue component that is equipped with a global event listener: let myApp = new Vue({ data: { foo: 0; }, methods: { handle: function(event) { this.foo = 1; // 'this' pertains to the handler, not ...

Custom directive with nested objects within a scope object

What is preventing me from having a binding in a nested object within my scope object, as demonstrated here: app.directive('myDirective', function() { return { scope: { dropdown: { option: '=selectedO ...

Integration of Django Tastypie with Angular for secure user authentication

I'm currently facing an issue where I cannot establish a connection to the Django server. Upon checking the browser console, I noticed the following error message: [![console error][1]][1] My setup involves using Tastypie along with a UserResource c ...

Unable to access a value from an object in Node.JS/MongoDB platform

I'm seeking assistance with my NodeJs project. The issue I am facing involves checking the seller's name and setting the newOrder.support to match the seller's support internally. Despite logging the correct value within the findOne() func ...

Exploring the power of the cssContainingText locator feature in Protractor

Currently working on a framework utilizing Protractor, I encountered an issue with the cssContainingText locator from the Protractor API. The locator threw an invalidElement exception, which puzzled me. The structure of the HTML page appears as follows: ...

WebGl - Perspective skewing perspective

I've been working on implementing an oblique projection in WebGL, but I'm encountering an issue where the projection appears identical to ortho. Here's the snippet of code setting up the projection matrix: mat4.identityMatrix(pMatrix); ...

Challenges with registering on Ajax platform

I'm currently facing an issue with my login/sign up process and I can't seem to figure it out. I have shared a jsfiddle link with the code, but I am struggling to identify the problem. https://jsfiddle.net/Zemanor/fuzrkw16/1/ Whenever I submit ...

Transforming a collection of items into a JSON format string

UPDATE: There was a mistake in the programming, please refrain from submitting answers. This question will be removed. If you have already submitted an answer, kindly delete it. I am attempting to submit a form using jQuery and ajax. One of the fields con ...

AngularJs Controller with explicit inline annotation

I usually inject dependencies using inline annotations like this angular.module('app') .controller('SampleController',['$scope','ngDependacy',sampleController]); function sampleController($scope,ngDependacy) { ...

Exploring AngularJS 1.x: Understanding the differences between isolated scope and using require with ngModel

Throughout my experience with Angular 1.x, I have always used isolated scope in my directives. However, recently I encountered a directive that solely utilized ngModel. This made me curious about the differences and potential issues when using both methods ...

Is it possible to notify the user directly from the route or middleware?

In my current setup, I am utilizing a route to verify the validity of a token. If the token is invalid, I redirect the user to the login page. I am considering two options for notifying users when they are being logged out: either through an alert message ...

How can I update a property within an object in a sequential manner, similar to taking turns in a game, using React.js?

I am currently working on a ReactJs project where I am creating a game, but I have encountered an issue. I need to alternate turns between players and generate a random number between 1 and 10 for each player, storing this random number inside their respec ...