Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

130
Vistas
How do I target a previous Element child by <tag> that is further back than just the previous element?

The problem I am having is targeting the text in the input tag in the HTML below with Button that is Copying that text (words). What do i need to change to the JS to get it to target that Input value?

I want to do this without using ID - as I plan on replicating this many many times and don't want to set up individual Id's for the Input tags.

If there is a way to refer to the Class - 'columns-small-8' - child element, then maybe that would work?

Thanks in advance

JS

<script> 

window.onload=function(){
let btns = document.getElementsByTagName("button")
Array.from(btns).forEach(ele => {
  ele.addEventListener("click", function() {
   jimsFunction(this)
  });
})  
function jimsFunction(input) {
  let x = input.previousElementSibling
  let ele = x.previousElementSibling
  ele.select()
  ele.setSelectionRange(0, 99999)
  navigator.clipboard.writeText(ele.value)
  alert("Copied: " + ele.value)
}}

</script>

HTML

       <div>
          <div class="row collapse">
            <div class="columns small-8">
              <input type="text" value="words" readonly>
            </div>
            <div class="columns small-2">
              <a class="button full-width secondary" href="www.google.com" 
              target="_blank">View</a>                                
            </div>
            <div class="columns small-2">
              <button type="button" class="button full-width secondary">Copy URL</button>
            </div>
          </div>
        </div>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

With your html structure, you can call to parent of it same as :

window.onload=function(){
let btns = document.getElementsByTagName("button")
Array.from(btns).forEach(ele => {
  ele.addEventListener("click", function() {
   jimsFunction(this)
  });
})  
function jimsFunction(input) {
  let x = input.parentElement.parentElement
  let ele = x.firstElementChild.firstElementChild
  ele.select()
  ele.setSelectionRange(0, 99999)
  navigator.clipboard.writeText(ele.value)
  alert("Copied: " + ele.value)
}}
<div>
  <div class="row collapse">
    <div class="columns small-8">
      <input type="text" value="words" readonly>
    </div>
    <div class="columns small-2">
      <a class="button full-width secondary" href="www.google.com" 
      target="_blank">View</a>                                
    </div>
    <div class="columns small-2">
      <button type="button" class="button full-width secondary">Copy URL</button>
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda