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.

Filter by
Sorted by
Tagged with
27
votes
4answers
4k views

Self-playing Baseball game

The Demo for what I have made is located here Basically I am trying to make a self playing JavaScript baseball game with the use of no libraries. Is there anything I could improve on in the code? <...
12
votes
3answers
2k views

Lights on: playing with buttons in Javascript

First play with the game a little bit, and it is quite fun (a little hard but very satisfying when you win, be sure to put it full page): ...
12
votes
3answers
7k views

Implementing an algorithm that walks the DOM without recursion

Here's a simple algorithm that walks the DOM given a node: ...
12
votes
3answers
11k views

Evaluating an XPath with document.evaluate() to get an array of nodes

The Problem Statement: Filter all nodes with an existing attribute that starts with a specific string (temp for example purposes). Print an array of node string ...
11
votes
3answers
2k views

Simple dice game - JavaScript MVC implementation

I did a simple dice game using what I learned about separating the 'view', 'model', and 'control'. I am quite clear on what the model is (it's the data and state). But I'm a bit confused on the ...
11
votes
3answers
252 views

Updating Grid on Webpage (new version)

Previous version: Updating Grid on Webpage Task: Draw a grid with a given number of rows and columns. Each cell can be any color. The same grid should also be updated at a predetermined time ...
11
votes
4answers
312 views

Application that creates a toolbar to show/hide elements on a page

I've been spending a lot of time reading about JavaScript lately, and this is my first piece code that I've tried to apply some of what I've read to. I'm trying to stay clear of using a framework for ...
11
votes
3answers
678 views

Simple Calculator Script

I written my own calculator script in javascript! It is a basic one, but works really well. I am just wondering if there is any way to make this script more efficient & clean. On first look, I ...
11
votes
1answer
832 views

Card-fighting game

I am currently building my first game/app in javascript. It is a very simple script that has about 130~ lines of code. I feel like what I did so far is not optimized, can anyone please help me ...
11
votes
2answers
183 views

Early Access: Dynamically expanding input element table

This code is in a really early state in the lifecycle. I'm still in the process of implementing some core features, but nevertheless the code up to here works and accomplishes its task. I have no ...
10
votes
3answers
3k views

Efficient string concatenations with DOM

I form DOM nodes as strings and append them to DOM tree like below using jQuery. ...
10
votes
1answer
60k views

Manipulate HTML document loaded into WebBrowser control

I have developed my custom solution for this. It happened that the first solution is using XPath queries and the second, a conceptually similar to the first one, is using CSS queries processed by ...
9
votes
5answers
169k views

Get the value of the name attribute of each element with class=“class”

I need a function to get the value of the name attribute of each element with class="class". I was wondering what is the best way to do this, performance-wise. Currently I'm using jQuery and doing it ...
9
votes
2answers
5k views

Showing two d3.js charts on the same page

I created two graphs in d3js: a bar chart and a donut chart. These two graphs use the same json object for data and share an input range and the radio button. This is the code: ...
9
votes
3answers
668 views

Carousel in Vanilla JavaScript

I finally got my carousel to work in JavaScript, and I want to know what you guys think about it and what I can do better. ...
9
votes
2answers
2k views

Determine closest ancestor that has a certain HTML class

When writing JavaScript code for my own projects, this functionality is the singlemost used algorithm that does not already exist: Finding an ancestor element that has a certain HTML class. Algorithm:...
9
votes
2answers
1k views

JavaScript Tic-Tac-Toe web app

I am teaching myself JavaScript and made a little Tic-Tac-Toe web app. I'm not asking anyone to read through it all, but to just tell me what I need or should not do in the future. ...
9
votes
2answers
309 views

JavaScript Game Engine Design

I recently gutted and redid my game code to be object oriented (before it was just functions and a mass of global variables. Before I go an make more functionality happen, I would like to take one ...
9
votes
1answer
525 views

Animate and play sounds in Simon Says 'the Angular way'

I am a newbie coder and I'm trying to learn good coding habits. I'm making a Simon Says game challenge from Free Code Camp in Angular JS. Codepen I have an array that keeps random integers between ...
8
votes
2answers
34k views

JavaScript function to get DOM elements by any attribute

I needed to write a function today in JavaScript that would return all elements based on a given attribute. e.g retrieve all elements that have an id attribute in them. The function I wrote for ...
8
votes
2answers
201 views

Switching some text labels when the first image of a carousel is active

Is there any way I can simplify this inefficient piece of JavaScript? ...
8
votes
2answers
861 views

Webpage with a preload animation using JavaScript setTimeout

I am working on a website with an animation that runs at the beginning before the content of the homepage becomes visible. I've looked at some examples of preloaders and now use that code with some ...
8
votes
2answers
155 views

Functional way to have two toggles that turn each other off

I have two sets of toggles that need to "uncheck" each other. This is my current solution which is working. Can it somehow get more functional/elegant? ...
8
votes
2answers
1k views

HTML/Javascript Hex to RGB and RGB to Hex Color Converter

I have recently started learning JavaScript (A great language) and decided to start a small project which consists of a website with two inputs, one for hexadecimal input, and one for RGB input. When ...
8
votes
1answer
12k views

Converting partial XML (Node List) to a String

I have a need to extract a part of XML tree (everything under root) and convert it to a string. (The result string will be later pasted inside ...
8
votes
1answer
693 views

Very fast query selector

A few months ago, I wrote a query selector that seems to outperform the query selectors in the popular GP libraries by a pretty hefty margin. I'm wondering if I overlooked something. It seems odd that ...
7
votes
3answers
3k views

Handling various types of nodes when traversing a DOM tree

How to minimize the following code using java's features ... looking for some workaround with the switch-case statement I've seen several question regarding switch-case design pattern / best ...
7
votes
2answers
6k views

Nesting elements with appendChild

I want to make a nav that look like this: ...
7
votes
1answer
3k views

Get checkbox value of unchecked checkboxes in a table

I have a table where a user can (un)check checkboxes among other features in each row. I faced the problem that I don't receive unchecked checkboxes to my backend. This led to a bigger issue since ...
7
votes
1answer
24k views

Shopping cart in pure JavaScript

I need help in making this shopping cart adhere to the W3C rules. This is already 100% functioning. I just need help in making this code as clean and as short as possible. I want it in pure ...
6
votes
3answers
463 views

Selecting elements from the DOM of a page

To get the book list from https://www.java67.com/2015/09/top-10-algorithm-books-every-programmer-read-learn.html , I am using the following code in the console of the firefox DevTools: ...
6
votes
4answers
654 views

Fix base64 data URI scripts function

So I noticed Chrome has quirky behaviour when it encounters script tags whose src is a base64 value. I decided to write a quick ...
6
votes
2answers
605 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? ...
6
votes
2answers
2k views

Platformer without canvas

Well I had a idea about making a platformer but wanted to challenge myself to doing it without using canvas. It uses some other codes from github for collision detection. Here is the result. <...
6
votes
2answers
90 views

HTML5 sectioning for my design

I've designed my new website: Now I want to build up my HTML as semantic as possible. Here's my first attempt / set-up: ...
6
votes
1answer
221 views

Simple input class change with vanilla JS

I am just testing how I solved simple stuff. Goal: The aim is to expand the width of an input and collapse it. When mouseover ...
6
votes
2answers
116 views

Hours:Minutes Addition

I wrote this simple page to help at work, and as an exercise to get more familiar with JavaScript. I'm especially interested in help with style and structure - is this "standard"? I know the input ...
6
votes
2answers
9k views

Poker game in JavaScript

I am creating a Poker game using the follow hand precedence (winning hands in descending order): So if the player enters 5 cards: TH JH QH KH AH (i.e. 10Heart JackHeart QueenHeart KingHeart ...
6
votes
1answer
54k views

HTML and JS to dynamically load, refresh, and execute JavaScript from external file

The following code is designed to load and refresh JavaScript code from an external file sandbox.js and allow it to be refreshed dynamically and executed without ...
6
votes
1answer
7k views

Simple todo list

Can someone tell me how good/bad this code is for a super simple todo list made from vanilla JavaScript? Anything to work on or consider on my next projects? ...
6
votes
1answer
83 views

map of SF transit cars

Please provide general and any specific criticism of the following which is intended to provide a map of SF transit cars. The code can be viewed in the working version and also in a group of gists. ...
6
votes
1answer
160 views

3D 1st Person Snake Game #3

Final iteration of an iterative review. The previous iteration is here: 3D 1st Person Snake Game #2 Note: For the snippet, click run, "Full page", purposely lose, and then type r. Here is the ...
6
votes
2answers
129 views

Starship Comparison App with ES6 Generators and the Star Wars API

Assignment Description: Make a web application that compares starships based upon the Star Wars API. There shall be: A label "Select two Starships from the dropdown lists to compare". Two dropdown-...
6
votes
1answer
102 views

Adding a replica of some DOM elements on click

I have the following code which inserts a new element of the same type over and over again to the parent element. I am new to JavaScript so was wondering if there was a better way of doing this. I ...
6
votes
1answer
111 views

Generating DOM from a complex strings via arrays

This is a revised and expanded version of Transforming complex strings into simple arrays My function grabPerson turns strings of user information from multiple ...
6
votes
1answer
89 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 ...
6
votes
1answer
541 views

Clock that changes document background color

This is a timer based clock (using setInterval()) that changes the background color of the body based on the clock time hexadecimal values. I suspect that this code ...
6
votes
1answer
174 views

To do app using VanillaJS

I've already written simple to do app using VanillaJS. Can you make any code review - JS? It also contain basic validation, if user type some thing two times. ...
6
votes
1answer
2k views

Pig Dice Game: Luck game to get to 100 points

I have a dice game called Pig to play (a simple google search will show rules, they are included in my .js file as well). I am new to JavaScript and the main goal of this code review is to give me an ...
6
votes
1answer
395 views

Tiny DOM builder

My goal was to create a tiny DOM builder library that made creating element trees less gross. This is the syntax I decided on: ...

1
2 3 4 5
8