I attempted to change the color of all elements in a certain class, but encountered an error:
Unable to convert undefined or null to object
This is the code I used:
<div class="kolorek" onclick="changeColor('34495e');" style="background-color:#34495e;"></div>
function changeColor(color) {
var block = document.getElementsByClassName('kafelek');
with (block.style) {
backgroundColor = "#" + color;
}
};
If you use `getElementsByClassName`, it will give you back an `HTMLCollection`, requiring you to iterate through them to change the color as shown below.
function adjustColor(color) {
var block = document.getElementsByClassName('kafelek');
for (var i = 0; i < block.length; i++) {
block[i].style.backgroundColor = "#" + color;
}
};<div class="kolorek" onclick="adjustColor('34495e');" style="background-color:#34495e;">Clickable Div</div>
<div class="kafelek">Another Div</div>Note: Rather than using inline `onclick` event, consider utilizing `addEventListener` instead.
One common mistake is searching for the wrong element when trying to access styles. To change the background color, remember to use element.style.backgroundColor = color.
Here's an example:
function changeColor(color) {
var block = document.querySelector('.kolorek');
console.log(block.style);
block.style.backgroundColor = "#"+color;
};<div class="kolorek" onclick="changeColor('999999');" style="background-color:#34495e;">sdfdsfds</div>I hope this explanation helps clarify things!
Initially, the use of with is discouraged and has even been prohibited since ES5 in strict mode (Please refer to the link provided in the comment above). Additionally, you are selecting elements with the class name kafelek, but your HTML displays the class as kolorek. Another issue is that you are attempting to set a property on an HTMLCollection, which is not possible. This action should be performed on individual elements. To rectify this problem, consider revising your code as follows:
function changeColor(color) {
var block = document.getElementsByClassName('kolorek');
Array.prototype.forEach.call(block, function(el) {
el.style.backgroundColor = '#' + color;
}
};
Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...
I have created a column chart using Highchart and I am facing an issue with the drilldown functionality. Whenever I click on a bar multiple times, the drilldown event triggers multiple times as well. This results in the drilldown event being triggered repe ...
Does anyone know how to create a button that changes the background color of a webpage each time it is clicked? I've been having trouble with the javascript function in my code. I've tried multiple solutions but nothing seems to work. Could someo ...
After creating "create-next-app," I successfully set up the folder structure as follows: +client2 --.next --node_modules --public --... --server.js However, when I move my "server.js" file to a different location: +client2 --.next --no ...
I am attempting to use ajax to retrieve the contents of a file, but it doesn't seem to be functioning properly. I'm not sure why this is happening, as I have copied the same code from the examples on w3schools.com. $().ready(function(){ ...
I'm facing two issues with my product information form. Firstly, after I submit the data, I want the input fields to be cleared automatically. Secondly, the edit function doesn't seem to work at all. I'm quite stuck on how to resolve these p ...
I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...
Is there a way to convert a string like "20150415" into a date with the format "2015, April, 15th"? I've come across multiple examples, but they all involve splitting with "-" or "/", which doesn't work for my case. Below is my current code snip ...
I have been developing a ReactJS website where I utilize Axios to fetch prices from an API. After successfully implementing this feature, I am now looking for a way to visually indicate if the 24-hour change percentage is positive by showing it in green, a ...
I am attempting to detect the click event on a checkbox. The Xpath for the element provided by firebug is as follows, starting with a table tag in my JSP (i.e. the table is within a div). /html/body/div[1]/div/div/div[2]/div/div[2]/div[1]/div/div[2]/table ...
For instance, if I have a domain (abc.com) with a page abc.com/data-list, how can I prevent users from manually typing in the address bar to access that page? I want to use JavaScript to dynamically update the content section without refreshing the entire ...
Creating a transparent menu in Bulma has been successful for the desktop viewport: VIEW DESKTOP MENU However, when attempting to implement the same design on mobile, the menu ends up like this: VIEW MOBILE/TABLET MENU The mobile version seems to inheri ...
Can anyone advise me on how to redirect certain HTML pages to corresponding PHP pages? For instance, if a user lands on www.example.com/sample.html from another website, I want them to automatically be redirected to www.example.com/sample.php without seei ...
I have 3 different observables that I am using to filter the HTML content. Here is the TypeScript code snippet: fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear); isLoading$ = this.store$.select(this.tableStoreService.tableSelector ...
I encountered an issue with a ValidationError stating that the Path password is required while attempting to register a new User. My experience in Node, programming, and authentication is limited. Below is the code for the User model and schema where I ma ...
How can I pass the ajax response obtained from the view to the template using HttpResponse? I'm unsure of the process. view.py analyzer = SentimentIntensityAnalyzer() def index(request): return render(request, "gui/index.html") @csrf_exempt d ...
Utilizing the AngularJS Bootstrap typeahead module, I am attempting to showcase data from an array of objects. Despite receiving data from my API call, I keep encountering the following error: TypeError: Cannot read property 'length' of undefine ...
https://i.stack.imgur.com/Ra0c7.png I'm trying to ensure that the width of the sidebar on this page aligns consistently with the end of the logo in the top right. However, using variations of col-xxl-1 etc. is causing inconsistent sizes at different ...
I am currently in the process of trying to change the name of a file while uploading it using the JQuery uploader. I have made some progress, and here is the crucial part of my UploadHandler.php: protected function handle_file_upload($uploaded_file, $name ...
I am facing a problem on my website where the padding and margins appear differently on different devices. I have compared screenshots of the site on an Android device and my desktop PC: Site displayed on mobile device: Desktop view: Below is the CSS co ...