Actualmente tengo un onclick incluso en un div como sigue
function copyToClipboard(e) { var textBox = document.getElementById(e.id); console.log(textBox); textBox.select(); document.execCommand("copy"); } <div class="form-inline m-2"> <input type="text" class="form-inline" name="myvalue" id="{{ p.id }}" value="https://diccionarioespañol.com/significado/{{ p.nombre|lower }}/" readonly /> <button onclick="copyToClipboard(this)">📋</button> </div> El problema es que no puedo hacer que el textBox de texto muestre los datos de entrada. En su lugar, muestra nulo. Entonces, ¿cómo obtengo la identificación del div o el valor de URL enviado al portapapeles?
Su botón no hace referencia a la entrada. Prueba esto.
function copyToClipboard(theId) { var textBox = document.getElementById(theId); console.log(textBox); textBox.select(); document.execCommand("copy"); } <div class="form-inline m-2"> <input type="text" class="form-inline" name="myvalue" id="{{ p.id }}" value="https://diccionarioespañol.com/significado/{{ p.nombre|lower }}/" readonly /> <button onclick="copyToClipboard('{{ p.id }}')">📋</button> </div>Si depende del evento de clic, puede verificar el padre desde el cual puede encontrar el nodo de entrada.
violín de trabajo
function copyToClipboard(e) { const input = Array.from(e.target.parentNode.children).find(node => node.nodeName === "INPUT"); console.log(input.id); var textBox = document.getElementById(input.id); console.log(textBox); textBox.select(); document.execCommand("copy"); } <div class="form-inline m-2"> <input type="text" class="form-inline" name="myvalue" id="p.id" value="https://diccionarioespañol.com/significado/{{ p.nombre|lower }}/" readonly /> <button onclick="copyToClipboard(event)">📋</button> </div>Puede usar el más cercano para obtener el padre, luego usar el padre para consultar la entrada y luego obtener la identificación de los objetivos del evento. Sin embargo, no usé el atributo onclick . Agregué un selector al botón y usé addEventListsner() con ese selector en lugar de pasar la función como una devolución de llamada al oyente.
function copyToClipboard(e) { const target = e.target.closest('.form-inline').querySelector('input'); var textBox = document.getElementById(target.id); console.log(target); textBox.select(); document.execCommand("copy"); } document.getElementById('button').addEventListener('click', copyToClipboard) <div class="form-inline m-2"> <input type="text" class="form-inline" name="myvalue" id="{{ p.id }}" value="https://diccionarioespañol.com/significado/{{ p.nombre|lower }}/" readonly /> <button id="button">📋</button> </div>