logo
down
shadow

How to get text next a input tag using document.querySelector?


How to get text next a input tag using document.querySelector?

By : user2172568
Date : October 23 2020, 08:10 AM
it should still fix some issue You can't, per se.
querySelector can only return an element (or null), and text is not an element.
code :
const input = document.querySelector("input");
const text_node = input.nextSibling;
console.log(text_node.data);
<input type="checkbox" /> Some text


Share : facebook icon twitter icon
JS - document.querySelector() || document.querySelector() gives type error

JS - document.querySelector() || document.querySelector() gives type error


By : Erick Valencia
Date : March 29 2020, 07:55 AM
Any of those help The reason you see the error is because your first query is returning null, and thus it has no property dataset. Try this instead:
(document.querySelector('[data-example="example1"]') || document.querySelector('[data-example="example2"]')).dataset.example
get partial text from result of document.querySelector()

get partial text from result of document.querySelector()


By : Milos Bicanin
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , What you seem to be looking for is the text node after the span. The nextSibling property should suit, however I think some browsers only return element siblings, not other types of node. See MDN:Node.nextSibling.
Anyway, try the following:
code :
var cccSpan = document.querySelector('.ccc');
var textNode = cccSpan.nextSibling;
console.log(textNode.data);
.aaa {color: red;}
.bbb {color: blue;}
.ccc {color: green;}
<div class="aaa">the div aaa
  <span class="bbb">span bbb</span>
  <span class="ccc">span ccc</span>
  text after ccc
</div>
How do I use document.querySelector to select a particular output of text from a node using document.querySelector?

How do I use document.querySelector to select a particular output of text from a node using document.querySelector?


By : Mateusz Janiszewski
Date : March 29 2020, 07:55 AM
hop of those help? I ended up using the following as a simple solution and saving it to a variable.
code :
document.getElementsByTagName('span')[1].innerText;
document.querySelector('.header--input').value vs e.target.value

document.querySelector('.header--input').value vs e.target.value


By : user2980092
Date : March 29 2020, 07:55 AM
this one helps. Your first code does not work because inputValue is evaluated before the time your keyup is fired and the value is empty and that does not change on keyup. To get the current value of the input you have to assign the value inside the event handler function:
code :
const input = document.querySelector('.header--input');
input.addEventListener('keyup', function(e){
  const inputValue = this.value;
  if(inputValue !==''){
    console.log(inputValue);
  }
});
<input class="header--input">
Why Document.querySelector is more efficient than Element.querySelector

Why Document.querySelector is more efficient than Element.querySelector


By : Remi Appels
Date : March 29 2020, 07:55 AM
should help you out From my comment above, the selector takes into account the entire document, then filters the items to check if they are descendants of the target. So it's likely that it still needs to scan the entire DOM tree like document.querySelector would need to do.
There is a discussion of the issue (that is still the current behaviour) here. You'll see in the code sample below the span is included as a result, because it can't just query items below foo in isolation.
Related Posts Related Posts :
  • jQuery target next of the same class in the whole DOM
  • encoding must be a valid encoding error in process encoding
  • How to do a date range to view data from selected date highcharts
  • How do I refactor this composed function with Ramda.js?
  • jQuery to serialize selected option's value, not label
  • Convert object to Chartis.js structure
  • Dynamic import with not bundled file
  • Click handler not firing for elements rendered in Ajax Callback - only in Safari
  • Math.max.apply gives an error CreateListFromArrayLike called on non-object
  • get the parent nodes to a given node in d3 dendogram
  • is-dropdown-submenu-parent makes links unclickable on Opera and Chrome
  • JS: Sum column values and updating result on change
  • Query against nested object keys
  • Fullcalendar getting its parent colspan
  • How to retrieve a dynamic number of elements by id
  • How to access redux variables and functions from deep components
  • Efficiently access Array.prorotype.filter single-item returns
  • PHP var into Javascript
  • How to parse json with javascript/jquery if content matches string
  • How can I make a pyramid based on alphabet?
  • Javascript sorting a csv rows and displaying in table
  • How to get specific data from json from api using ajax. The json looks strange to me
  • react js html5 video not working
  • Javascript Angular 4 Change ngClass from another Component
  • Hide multiple table columns with javascript
  • Convert datetime to ISO Format using moment js
  • Dynamically adjust canvas size depending on content
  • setTimeout function with document on click
  • Need advice on nested Promises.all
  • Google Captcha expiration time
  • Syntax of Javascript TAPE unit test
  • Parse php json to javascript
  • Write to Internet Explorer javascript console with vba in excel
  • 2 Forms with Jquery
  • Why the loop stops right in the middle?
  • filter system for restaurant booking
  • how to add active class in framework nav menu when (add/edit) pages are opened
  • Port a js map in dart
  • How to get value from select using javascript
  • Audio won't be muted with JavaScript - removing audio tags with mutationobserver needed
  • How to include an HTML/Javascript game into reactJS website
  • Convert Nodejs server into node module
  • Strage Vue behaviour. V-if does not watch properly
  • Is it possible to use map/filter/reduce inside a promise by returning the result with Promise.resolve?
  • Does EcmaScript have any rule where whitespace is important for the compiler during parsing
  • How is DOM and Virtual DOM represented in memory?
  • cannot display text onchange select option
  • My gulpfile can edit (change) and delete file, but dont copy new (add) files
  • How do I reset scroll position of paper-dialog-scrollable?
  • Loading unlooped gif-animation several times
  • Strange error from Google API: initializeAutocomplete is not a function
  • Array state variable is not being set during componentWillMount
  • Stop refresh on form submit when using javascript
  • Npm WARN deprecated babel-preset-es2015@6.24.1: Thanks for using Babel: we recommend using babel-preset-env now: please
  • Cant get wheel scroll delta on Firefox
  • Puppeteer with Prompt, ignoring rest of function
  • VueJS Form Input Binding
  • How To Extend mail.Chatter Widget in Javascript Odoo 10
  • How Chk two checkboxes at a time using jQuery
  • Broken "if" statement in JavaScript code…
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org