Questions tagged [dom]

15531 questions
1

votes
1

answer
404

Views

Listening for button click in PWA service worker

I am trying to follow the following example for PWA Push Notifications but have a general question regarding service workers https://developers.google.com/web/fundamentals/codelabs/push-notifications/ Within my Service Worker, I want to add a listener to a button/anchor tag My Service Worker is init...
Mike
1

votes
1

answer
2.2k

Views

Watch height of an element in VueJS

Is there any way to set a watcher on the height of an element in VueJS? I am trying to fix the filters part on a search result page. but if the results change there is no way to find about it and unfix the filters.
Saeed
2

votes
1

answer
55

Views

How can I achieve a consistent focus outline color with shadow-dom web components?

I'm using web components, mostly written with lit-element and lit-html, and they use the Shadow DOM. Some components have buttons and other interactive parts which have the default focus outline. When I build an app, i like to set a page-wide rule to change the focus outline to a color that clearly...
ChaseMoskal
1

votes
2

answer
59

Views

Is it good to access DOM in vue js?

I want to know is it OK to access DOM in a Vue js application? For example, if I want to append an element (div) to body tag is this recommended to use document.getElementById in a Vue js method? I have no data that can be used to make or remove elements based on data. I really just want to know is...
Aref Hoseinikia
1

votes
1

answer
171

Views

React hooks - state in useState() is not reset when route is changed

const Create = () => { console.log('rerender !!') const [parcelType, setParcelType] = useState('paper') console.log('parcelType =', parcelType) return ( setParcelType('plastic')}> Header ) } export default Create I want to change parcelType state to 'plastic' when click on Container in Create compon...
sarin udompanit
1

votes
2

answer
28

Views

Remove textNode with mouseout DOM

I've created a button that displays a box when clicked, then on mouseover the class of the box (which is boxCount) appears as text. Now, I want to remove this text on mouseout. I've tried countless options and I can't seem to get it. My prior attempts are commented out. I've also tried variations on...
SSMegan
1

votes
2

answer
32

Views

How to change image src when parent has “selected” class?

Im trying to change the image by looking at the parent class to see if it has 'selected' in it. I have some code that adds the 'selected' class to the 'platform-selection' class. var xboxselected = document.getElementById('xbox').parentElement.parentElement.classList; if(xboxselected = 'selected') {...
hexer34
1

votes
3

answer
47

Views

How to clear an input with javascript?

I have 3 inputs: Text 1 Text 2 Text 3 I would like that when you click in the text3, it erases the text1. I did a function but it does not work: function myFunction(text3) { document.text1.value = ''; }
ERK0SS
0

votes
0

answer
3

Views

When updating the transform of an SVG element, Firefox moves the clip-path while Chromium doesn't - which is right and what is a portable solution?

Firefox and Chromium have different behaviors when the transform of a clipped SVG element is updated. Firefox moves the clip path, whereas Chromium does not. Example code: Click to translate var b = document.getElementById('button'); var g = document.getElementById('group'); b.onclick = function(eve...
TAH
1

votes
2

answer
2.8k

Views

Mistake in fetching childNodes of HTML table

I'm a bit confused regarding HTML DOM. I'm trying to get the rows of a particular so that I can interate through them. HTML MARKUP: @Html.DisplayFor(m => m.FirstName) @Html.DisplayFor(m => m.JobLocation) @Html.DisplayFor(m => m.MiddleName) @Html.DisplayFor(m => m.StateOfResidence) @Html.DisplayFor(...
karan k
0

votes
1

answer
18

Views

Close React Modal

I'm having a lot of problems trying to figure out how to add a functioning close button to my modal - constructor/props hasn't been working and I'm not sure what to put after onClick= in the button element. class Modal extends React.Component { // whenever component gets rendered to the screen we c...
Ally Fuller
1

votes
1

answer
479

Views

How to change the font size for the contents of a cell created using javascript

I have created a table using javascript . Here is the code var table = document.createElement('TABLE'); table.border='1'; var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); var tr = document.createElement('TR'); var td = document.createElement('TD'); newString = td.append...
Reshma CB
1

votes
0

answer
7

Views

How to exclude a path from <Route> using react-router-dom?

This code will render only when the path is '/' ? But what would do the opposite? That is, what is the best way to render always EXCEPT for '/'? Is there an 'else' equivalent?
Michael Schade
1

votes
2

answer
832

Views

Reverse the order of elements added to DOM with JavaScript

I am making a game in JavaScript, and need an event log. If i attack, it tells me if i hit or i miss. Here is my code: function eventlogshow (text){ var para = document.createElement('p'); var node = document.createTextNode(text); para.appendChild(node); var element = document.getElementById('eventl...
0

votes
1

answer
1.3k

Views

How do I add back elements with GWT after removing them with DOM.removeChild()?

I am using GWT 2.5 for an application. I have some static HTML with a specially named div, and I am using HTMLPanel.wrap() to replace that div with a GWT login panel. Once the user logs in I am using DOM.removeChild() to remove all the static elements from the page and use nothing but GWT widgets. T...
James B
1

votes
2

answer
1.2k

Views

JAVA Ignore commented out xml tags

While i'm parsing an XML document, i get commented out code as a node (which is a bad idea to begin with), i wan't to know when we have a commented out node/bulk and not to parse it. This is the code that parses the XML elements: private static boolean updateXML(File file, Document doc, NodeList nod...
Itzik984
0

votes
0

answer
5

Views

Selecting a className from another component in React

I'm trying to toggle a className from another component with React but can only access the 'root' id and not others components className. import React, { Component } from 'react'; import Switch from 'react-switch'; import '../css/index.css'; import '../css/Header.css'; class SwitchExample extends Co...
Yann
11

votes
2

answer
692

Views

Why do elements created under a `new Document` contain the wrong prototype?

When creating a div it is an instance of HTMLDivElement: var d = document.createElement('div'); d instanceof HTMLDivElement; // true d instanceof Element; // true This also holds true when obtaining an external document and window: var frame = document.createElement('iframe'); document.body.appendCh...
0

votes
1

answer
16

Views

Issue in IE11 want flex-content-item to occupy full width same as table

Issue in IE11; I want flex-content-item to occupy width same as table with scroll bar. I tried using some flex concept but did not work. To understand where is flex-content-item I have added a red border. Now this border is available till 100%, I want it to wrap the entire table. This is working in...
Vishal Patil
1

votes
2

answer
537

Views

Serving react-routes with Express

I'm using react-router-dom and load components on rotes like this: ...and so on... I build this project with webpack and have only 1 single file bundle.js. and use It as static files in my server.js import express from 'express' const app = express() app.use('/', express.static('./public')) app.list...
1

votes
2

answer
356

Views

Window is loading first than DOM with jQuery on Google Chrome

I'm new to jQuery.I have learned that DOM content will be loaded first and then window.onload event will occur as all the style sheets and images have to be loaded. But this doesn't turn out for me with the following code Add Event Listener $(document).ready(function(){ alert('DOM Loaded'); }); $(wi...
R.S.S.H KRISHNA
1

votes
2

answer
56

Views

In react, what is the best way to perform an API call and redirect before Render()?

I mostly do backend, so my javascript isn't all that, but I'm having a problem in my admin panel I'm designing. Some parts of the site can only be accessed by certain users. Each time the protected component should load, I send a request to my REST server, which returns back either 200 or a 403, th...
jupiar
1

votes
3

answer
355

Views

Angular 6 performance issue with large table [duplicate]

This question already has an answer here: Angular many rows grid performance in Chrome browser 1 answer I have a problem with Angular 6 performance issue. In the page there is a large table which has 100 rows and each row has 100 columns. Then this page is kind of laggy when I trying to use librari...
You Zhou
1

votes
2

answer
43

Views

How to extract adjacant elements in the dom by inner html

I would like to extract adjacent DOM elements by searching for innerHtml text. The elements are not children of a wrapping parent. An example will make it easier to understand: 1. This is the first paragraph.. click 2. And this is the second... 3. this is the last paragraph I would like to find the...
sir-haver
1

votes
1

answer
63

Views

Is it ok to attach a lot of event listeners?

Assume I have some component, that represents some kind of smart image (IUKWIM :D). export default class SmartImage extends React.Component { state = { visible: false } wrapper: HTMLDivElement componentDidMount() { window.addEventListener('scroll', this.handleScroll) this.handleScroll() } componentW...
Levitator Imbalance
1

votes
2

answer
51

Views

Display a div using a radio buttons

To reduce the number of lines of code I simplified my code to display three divs instead. What I want is to have a particular div displayed while hiding the other two divs depending on which radio button is checked. I'm actually following these two links Adding event listeners to multiple elements...
Spanish beginner
1

votes
3

answer
49

Views

react is not recognizing params?

so in react I have an App component that is rendering several child components like this: App render() { return ( //JSX inside } /> } /> } /> } /> {/*pass in the signIn() in a prop called signIn to the UserSignIn component*/} {/* */} ); } In this component I have params so that I am able to see a c...
Erik L
-1

votes
0

answer
18

Views

Can I set to a “onclick” attribute (of an element) a value referring to a function within an array of functions?

I am trying to automatically fill some datas to an HTML doc from an array (first name=, last name=, age=) of this type: Prod=[] with Prod[0]={name:'eee', 'age':'22',...} I have a function1(), function2(), ...function20(), which are all the same except from position on the array (prod[0], prod[1],..)...
aerfi
1

votes
2

answer
40

Views

How to remove a scope of a component injected from a parent directive

I have a directive that dynamically adds child custom directives to the DOM based on some input. Everything works fine. But when the input changes and I re-render the DOM with a different set of child custom directives, the old scopes of the child custom directives are not deleted and hence, the eve...
user5095515
1

votes
1

answer
25

Views

windows.onclick keeps clicking automatically

const toggle = document.getElementById('toggle'); window.onclick = function (event) { if (event.target == toggle) { toggle.checked = false; } }; .navbar { background-color: #5f686d; display: flex; justify-content: flex-end; position: fixed; width: 100vw; z-index: 2; top: 0; } .navbar ....
Pelumi
1

votes
1

answer
90

Views

CSS opacity animation changes position? [closed]

Does the CSS animation property when used to change opacity also change the position of an element? If so, what is going on in the DOM that makes that happen, and how can it be offset? Context: I've added a Javascript EventListener to a set of images, which when clicked calls a function that initiat...
Dan-in-Austin
1

votes
1

answer
40

Views

Function for changing numbers with React doesn't work properly

I'm trying to change number stored in a variable by clicking a button but the first time I click the button, it doesn't change the value of the variable but the second one does. I change the number in increments of 1, so when I click the button its currentNumber += 1 and I run a console.log after it...
Leo
0

votes
0

answer
7

Views

How to re-render image in custom React chat

I have inherited an HTML page that hosts a React built custom chat window. In the chat window, when a user enters text then a generic bubble image is placed beside it. Some minor dialog can take place prior, however before any real interaction happens the user needs to login. When this happens their...
Steven Kanberg
1

votes
2

answer
2.5k

Views

ERROR: Image is not defined (trouble using Image() function)

I use a very simple piece of code (but then obviously with my image instead of Image.png). I am trying to give my canvas a background image. var canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); var img = new Image(); img.onload=start; img.src='Image.png'; function start(){...
NTMN
1

votes
2

answer
144

Views

How to update DOM in each loop iteration?

I have the following class: // Population class class Population { constructor(size, target, mutationRate, minFitness) { this.target = target; this.size = size; this.individuals = []; // contains phrases (strings) this.matePool = []; this.mutationRate = mutationRate; this.bestFitness = 0; this.bestP...
PictureElement
1

votes
1

answer
39

Views

JavaScript play videos with same class control by play buttons with same class

I'm trying to make 3 play/pause buttons for 3 videos. Each play/pause button controls the closest video. (function () { var play = document.querySelectorAll('.video_play_button'), video = document.querySelectorAll('.timeline_video'); function videoPlay() { video.forEach(function (videoItem) {...
Shan Jiang
1

votes
0

answer
35

Views

Understanding React browser history

I am building a web app using react 16 and react-router v4. My app has index.js like this - import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; import Bootstrap from 'bootstrap/dist/css/bootstrap.css'; import 'font-awesome/css/font-awesome...
nasaa
1

votes
1

answer
54

Views

Blade nested section produces misformatted DOM

Here is the content of my home.blade.php file: @extends('layouts.master') @section('content') @extends('partials.sidebar') @section('pagecontent') This is home @endsection @endsection layouts/master.blade.php contains the main layout which has the typical structure. In it's , I am yielding to a sect...
Tanmay
1

votes
2

answer
378

Views

Simple HTML DOM get value “data-url” from <div> tag

I'm trying to get the value from 'data-url' from tags like this: this code is not working: $urlVariable = ('https://www.example.com/'); $html = file_get_html($urlVariable); foreach($html->find('[data-url]') as $detailLinks) print $detailLinks...
miniMax

View additional questions