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
2
votes
1answer
45 views

Toggling the background color of a page using JavaScript closures

This question is to see if I can get some input on the "design pattern" I tried to implement here. I'm just learning about closure in JavaScript and I think I'm starting to get it. I'm wondering if ...
1
vote
1answer
37 views

Dynamically inserting html from external file and updating the database

I need some suggestions on how to approach this. I want to allow users to create sections of website. The code so far is working but since I am new to back-end I feel like there is better, more ...
2
votes
0answers
39 views

Wait for an element to exist in DOM before clicking it

Here is the problem: some script is injecting some HTML5 elements (actually a button with the #thebutton ID) to the current DOM. But this is a third party script ...
2
votes
1answer
36 views

Basic input system for a few form fields

I am attempting to port a linear function that I designed in a spreadsheet into HTML and Javascript. It's based on linear least squares where I have to take a Matrix and multiply it by its ...
1
vote
0answers
17 views

Creating a reusable plugin (Dialog/Notifier as example)

I started working on a notification system that is pluggable into any project. I have not made any "plugin" type javascript libraries, usually just functions very specific to the project at hand. That ...
1
vote
1answer
39 views

JQuery Selector in Vanilla JS

I've decided to reproduce the JQuery selector - specifically for finding elements by class name, ID, and tag So for example the tests could be written like ...
2
votes
0answers
26 views

Angular 8: Scroll spy implementation for a timeline Contents

I have made a timeline component that can have multiple milestone/major/minor as sub components nested within timeline container component. I have also added a side navigation for that lists all ...
3
votes
0answers
20 views

Copy-to-clipboard function from a React.js component

I have a React component with a copyToClipboard method, which all works fine, but feels extremely verbose and quite hacky (namely, having to create a new select ...
4
votes
1answer
43 views

Modularized JavaScript event handler to increment counters

In the following code we use the function Incrementer (capitalized for clarity, despite that it's to be used without new), to ...
3
votes
1answer
35 views

helper function to determine if html text is wrapped with a certain tag

I have this code that I've made to parse a string of HTML and tell me if it is all enclosed within a specified tag: ...
3
votes
3answers
45 views

Simple javascript code to create an image caption

I'm trying to become better at javascript and have written a simple script that just creates some html from getting some details from some elements (e.g. the image alt text) and inserts it onto the ...
2
votes
1answer
44 views

Is this a proper way to cancel an onMouseOver which uses setTimeout? (Vanilla JS)

I've got a working solution for an onMouseOver event which rolls over a set of images and replaces them in the element. Due to my lack of knowledge in JS I would ...
3
votes
2answers
44 views

jQuery dynamic toggle class function

I wrote this function that will toggle a class of a targeted element. Applying the class js_class_toggle to any element will trigger the function when clicking on ...
2
votes
0answers
53 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
20 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 ...
0
votes
2answers
58 views

Asynchronous query to load products from laravel controller

The following code works fine. When a user clicks on an element, an AJAX request is made, which will return the query result. The results are being displayed in a view. I read many articles where ...
6
votes
0answers
60 views

Todo list using pure JavaScript [closed]

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
226 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
38 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
26 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
187 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
47 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
45 views

jQuery redirect form

I'm using jQuery to create a (hidden) form that redirects people to another page using JavaScript. ...
0
votes
1answer
40 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
31 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
40 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
64 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
58 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

Show maximum 4 forms on user actions [closed]

HTML ...
1
vote
3answers
47 views
3
votes
1answer
110 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 ...
4
votes
1answer
46 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
34 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
58 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 ...
2
votes
1answer
190 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
72 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
61 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 ...
4
votes
1answer
103 views

UpvoteJS, a simple voting widget in vanilla JavaScript

I implemented a simple voting widget like the one used on Stack Exchange sites, to use for other purposes (see live on bashoneliners.com), as a reusable package, dubbed UpvoteJS. Here's how it works: ...
2
votes
1answer
62 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
108 views

JavaScript Tic-Tac-Toe

The first function makes 2 players ...
3
votes
1answer
167 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
36 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
67 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
168 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
336 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
127 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
55 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 ...