Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [dom]

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

2
votes
0answers
37 views

Vanilla Javascript code to sort nested tables

I have written a code to sort a main table containing tables in each of its rows. Here I am trying to sort the table by first sorting the rows in each of the main rows and then sorting the table from ...
1
vote
0answers
15 views

Dragging and dropping a spot using TypeScript

Currently my code is based around mouse events so that it is easier to test but I will be swapping these to touch events once I have had the code reviewed. The idea of the UX is that you need to ...
6
votes
0answers
46 views

Todo list using pure JavaScript

I watched a YouTube video and completed the Todo List using Pure JavaScript. Below is the code I wrote. I want to improve this code, but it 's not clear how. I want to change this code to ...
6
votes
2answers
205 views

Tic-Tac-Toe code in JavaScript

I have developed a tic-tac-toe game in native JavaScript. Can you tell me how to optimize more and what are the missing things? JSBIN The logic, modular approach, testable and scalable? ...
1
vote
1answer
33 views

Targeting only 1 event in DOM

In the picture below, I want to open a modal when a user clicks anywhere within in the yellow block, including if they click on the white ‘+’ sign. The problem is, the click event happens on a ...
1
vote
1answer
24 views

Summing buying and selling rate fetched from the web txt

I've got a class that is like a facade, like an engine for my application which is responsible for fetching data from url and summing it. I have got problem with proper names for my methods. ...
3
votes
1answer
174 views

Tic tac toe game in a web browser

I have this tic tac toe game which is very old project of mine, though I made some changes on this to improve the script to perform better. This game is functional, Any logic improvements or other ...
3
votes
1answer
46 views

Replacing GitHub usernames with links

A user wrote an issue asking if inside the bio (or any arbitrary tag), any tagged accounts can be automatically linked like on Github. I gave them this function: ...
2
votes
2answers
44 views

jQuery redirect form

I'm using jQuery to create a (hidden) form that redirects people to another page using JavaScript. ...
0
votes
1answer
36 views

JS to create Table data dynamically

The following codes generate table row dynamically. I wonder if there are better ways of generating the same data. Also instead of manually coding the heading and the table itself, is it possible to ...
4
votes
1answer
89 views

AutoSuggest: Better way to implement focus after inserting a snippet

Introduction: I am working on a javascript plugin AutoSuggest, My aim is to create an IDE like autocomplete experience in web applications using JavaScript. One of the features I have implemented is ...
3
votes
0answers
28 views

Fullscreen slideshow with fading background

For the past months I have been learning plain javascript without jquery or libraries/frameworks. So now, when I develop a website, I want to write all of the JS code by myself to fully understand ...
2
votes
0answers
37 views

Determine if a section is in view

i am currently learning to do things with vanilla Javascript. No plugins, libraries or code snippets. I want to do things on my own, so that I understand 100% of what is happening. I wrote a little ...
1
vote
1answer
59 views

Generate a Style Tag and Append to a Document

Code Review I have two functions of styleAppend and getCss, which generate and append a ...
3
votes
1answer
48 views

Move and resize square boxes with Vanilla JS

Feature requirements. I can move a square box. I can resize a square box by stretching four edges. Many square boxes can exist. I've implemented moving and resizing square boxes by module pattern. ...
-2
votes
1answer
39 views
3
votes
1answer
78 views

Google Custom Search placeholder function in JavaScript

Problem: We have a Google Custom Search function that replaces the input placeholder attribute and it works okay. Would you be so kind and help me with reviewing ...
3
votes
1answer
45 views

Function to display an alert

It's a user alert script. It worked in every browser I tested. But the function itself looks very messy/repetitive. Is there any way to make this cleaner? ...
1
vote
1answer
24 views

Activating Lightbox on HTML elements with the has-lightbox class

I'm in the process of trying to do "object oriented thinking", as to improve my code skill. I've the following method that creates a lightbox for every item with the class ...
1
vote
1answer
32 views

JavaScript shortcut to create elements

I've created a personal API for creating elements for an HTML page. I would like feedback on efficiency, particularly in creating buttons and labels. Any and all feedback is appreciated and considered ...
3
votes
2answers
46 views

SRT caption support for HTML5's video element

With HTML5 you can add captions to your video using the <track /> element. However, only vtt files are officialy supported, while the current most populair ...
1
vote
1answer
92 views

window.innerWidth - workaround for when it returns the wrong value

Some JavaScript libraries relies on window innerWidth and innerHeight to do their calculations ...
1
vote
1answer
67 views

Adding <li> items dynamically to a to-do list

For a homework assignment, I have to create a "TO-DO" list, which will add a list item to the unordered list dynamically using JavaScript. The input element is also added using JavaScript, having to ...
1
vote
2answers
58 views

JavaScript DOM Implementation

I'm supposed to create a website that adds multiple forms to the page, is responsive and checks if the inputs are valid (validation is not important, just needs to show some attempt at regex). Below ...
2
votes
1answer
61 views

HTML form with confirmation before submission

I'm creating a website about an auto show that the user is going to. I'm collecting input from them via textboxes, check boxes, radio buttons, etc. I'm presenting them with a confirmation that the ...
0
votes
1answer
98 views

JavaScript Tic-Tac-Toe

The first function makes 2 players ...
3
votes
1answer
140 views

Tip Calculator in pure JS

A simple tip calculator that asks for the total bill amount, service quality (used to determine what percentage of the total cost will be tipped), and how many people are sharing the bill (used to ...
0
votes
1answer
34 views

Changing the text of a few elements when a tile is clicked

I have created a basic web page that contains a panel which displays some details about an object, and a panel which contains some tiles that are used to choose which object to view. The idea is ...
1
vote
1answer
42 views

A simple jQuery function that removes empty or tags containing just '&nbsp;'

I've made a simple function, this time in jQuery rather than JS, that just removes empty <p></p>, span and strong tags. I'm curious to see what everyone ...
3
votes
2answers
65 views

Displaying information extracted from an HTML table

This function below (used on a timeout due to my page loading time) displays information on my site. I grab this data from my table view that I load into the page. It is launched by clicking a button ...
3
votes
2answers
150 views

Lazy-loading iframes as they scroll into view

I'm working in a Tableau driven system, with large numbers of charts, I needed a way to reduce the strain of the initial load of our app. It's fairly simple, but wanted to ensure I accounted for every ...
2
votes
0answers
221 views

Event Calendar in JS, CSS, and HTML

I repeated a lot of code here and I'm trying to use more ES6 but I'm not sure where I should have used it in my code. I'd appreciate any input on where I could improve. GitHub ...
2
votes
1answer
122 views

My first ToDo list in JavaScript

I'm new to programming and in front-end. It's really hard for me to learn good practices. Right now I'm trying to learn javascript basics and bootstrap in addition. I did mine first ToDo list with ...
1
vote
2answers
53 views

Replace string of class of button by class so that only one button is filled in using bootstrap buttons

I'm using bootstrap buttons, and in this case I have 5 different buttons with 5 different classes. When one of the buttons is clicked on, I want it to be the only one filled in, and the others to only ...
1
vote
1answer
79 views

Drop-down selectors for state and city

I have this old code and I want it to be easier to understand. Originally, it loaded using an onload on the opening body tag, so I managed to change that to a window.onload, but now redundant code is ...
1
vote
1answer
38 views

TypeScript 3 form validation object

Please, correct me with anything that I say in here (The actual question is below the code). I've been quickly prototyping a project (ASP.NET Core 2.1) and haven't found the need to structure it with ...
0
votes
1answer
31 views

JS counter in DOM

I've written a function to update the contents of an HTML element to display a counter. On pageload the counter will recieve an initial value, every five minutes the new value will be requested from ...
5
votes
3answers
109 views

JavaScript Snake: First app

I just finished my first full app in JavaScript and I'm hoping to get some feedback. I guess I'm looking for overall design advice, use of classes and functions etc. but anything is fair game so I am ...
3
votes
1answer
58 views

Toggle Event Delegation

NOTE: the Javascript is all I'm concerned about, the HTML/CSS is just DEMO code. One caveat is ARIA states or attributes, if you have input on that, by all means, dive in. I had the need for and ...
2
votes
2answers
107 views

JavaScript interest rate calculator

As I am still new to web development, refactoring my code is still something that gives me some trouble. I would really appreciate it if someone could look over the Javascript for an interest rate ...
2
votes
1answer
37 views

IOT Javascript GUI/Hub - Displaying Incoming Data

A server sends JSON to my webpage via a socket and the webpage creates or updates a "card" which displays the information from the JSON data. It's a one-way/read-only system. Flow is: Thing sends ...
3
votes
1answer
61 views

jQuery plugin to load a full-page view window

I am writing a lot of jQuery plugins lately, but I don't really know if what I am doing is any good. Here is one of my most recent plugins, this allows you to add a data attribute to any class and ...
-2
votes
2answers
63 views

Chaining setTimeouts

Is there more efficient, proper way, to write a function like this? The effect I want to achieve is to remove CSS classes in three steps, one after another. ...
4
votes
2answers
258 views

Arkanoid/Breakout clone with ThreeJS

Here's my attempt at an Arkanoid/Breakout clone using JavaScript with ThreeJS. The feedback I'm looking for is more on the code side; the game itself is a work in progress. You can take it for a spin ...
3
votes
2answers
626 views

Simplifying Counter of Checked Checkboxes

Is the following code a proper solution to my problem? I have a feeling it can be simplified quite a bit. If one of the first four checkboxes is checked the sum is 1; if two 1.5; if three 2; if ...
2
votes
2answers
51 views

Dim Hero & Add Background to Nav on scroll

I have followed a tutorial that initially was for adding a 'sticky' nav. I adapted this slightly so it adds a background to the Nav when the page scroll reaches the top-third point of the hero area. ...
1
vote
1answer
64 views

Continuously update position of div with click event

I am trying to continuously get the position of a div on screen and update the new position each time a "click" event listener is clicked. At the moment my code works but feels redundant and could be ...
5
votes
2answers
110 views

Upvote/counter in Javascript

Looking to improve building UI in pure ES6. This is the pattern I have adopted and has worked fairly well. This code increments the count, sets a data attribute to toggle the button, and issues a ...
4
votes
3answers
90 views

Breaking group of items into rows then ensure consistent height of each row element

I'm working on a product category page where the product images have inconsistent heights so I've been asked to improve the page appearance without changing the images. The page contains x number of ...