I have 3 div which are item1, item2, and item3. item1 with <data-price=”10″>， item1 with <data-price=”20″>， item1 with <data-price=”30″> What I’m trying to do is when selected the item, it will get the item’s <data-price> and sum up, while if unselect the selected item, it will remove/deduct the <data-price>. But my code result only shows the selected item instead of
Tag: dom
Very Simple HTML/JavaScript Button Not Working
What should be an incredibly simple button is not working. All I want is for it to log something to the console for some testing purposes, but it refuses to work. There’s the button in my HTML file, and below is the JavaScript that, as far as I can tell, should be working. All I want is for the button
How to uniquely identify DOM elements while using little size for the identifier
I am working on a project where two browsers should synchronize their DOM elements. Whenever a DOM element changes on one browser only the changes and the position of the changed element get sent to the other browser by a websocket. In order for this to work I need a way to give the changed element a uniquely identifier that
How to add a class to the body element in javascript?
So I wanted to code a simple thing in javascript, I have a responsive navbar with the hamburger button: I wanted to halt scrolling whenever the hamburger menu is active. So I wrote this javascript code: And of course I added .noscroll{ overflow: hidden; } to the css file. It didn’t work for some reason which I hope you guys
How to load multiple files from CDNs asynchronously (but execute them synchronously)?
When downloading multiple commonly used javascript/css files (e.g. boostrap and jquery), many topics like this one recommend the use of a CDN, with one of the main arguments that it can then be used to load them asynchronously. How does that work? To the best of my knowledge, <script> tags in the header are read synchronously, so it won’t actually
Javascript Function Defining Performance on Browsers
Is there any browser performance difference between defining javascript functions before and after DOM loaded? I usually define functions after DOM loaded like this and some people use this way Theory-1: They say Example-1 is slower than Example-2 because Example-1 waited DOM to load then started to define functions and then page became to work in full function. However, in
Need to select text of selected dropdown using JavaScript
I have a dropdown with values. I have an array array with a list of values that will match the drop down values. If the value of text option of the dropdown exists in the array, it shouldn’t show in the dropdown as an option. I am stuck on the approach I should use. This is what I have so
Render vue component in data
I trying to make custom tooltip for apexcharts like in example: https://apexcharts.com/docs/options/tooltip/# and it’s works, but when I set in return some vue component nothing shows. Why is this happening and how to fix it? Answer To make Vue render the component correctly, you’ll have to tell it to in the custom tooltip function: If you need data or other
js DOM divs manipulation problems
I am currently learning DOM, and found the following task quite hard to complete in an proper manner. The js code is supposed to: append new divs, as a continuation of the existing ones, remove the existing divs, change colour of one div, switch all div’s text content. My issues: Task 1. works but in a ugly way, new divs
How can I make a simple chat/store messages in localhost?
I’m working on exercise, a simple chat/store messages, working on localhost, but it’s not working properly. The objective is to send user and message, and store the user and messages sent with a date. Like:(11:32 @USER: Hello world). This message data (with user,message and date) should be displayed on page, one after another. I’m doing this with no dependencies, but