Estoy tratando de cambiar dos párrafos después de hacer clic en el botón pero estoy atascado. ¿Hay alguna forma de hacer esto usando HTML interno sin usar IF o boolean? Probé este código pero no funciona. Gracias
let elmsButton = document.querySelectorAll("button")[0]; let elmsParagraf1 = document.querySelectorAll(".prvni")[0]; let elmsParagraf2 = document.querySelectorAll(".druhy")[0]; elmsButton.addEventListener("click", () => { elmsParagraf1.innerHTML = "<div class='druhy'></div>" elmsParagraf2.innerHTML = "<div class='prvni'></div>" });Asigne cada DOM.innerHTML de párrafo a una variable y luego intercámbielos como se muestra a continuación:
let elmsButton = document.querySelectorAll("button")[0]; let elmsParagraf1 = document.querySelectorAll(".prvni")[0]; let elmsParagraf2 = document.querySelectorAll(".druhy")[0]; elmsButton.addEventListener("click", () => { const p1 = elmsParagraf1.innerHTML; const p2 = elmsParagraf2.innerHTML elmsParagraf1.innerHTML = p2; elmsParagraf2.innerHTML = p1 }); <button>Click</button> <div class='prvni'>Paragraph 1</div> <div class='druhy'>Paragraph 2</div>Puede cambiar esos dos divs creando una variable temporal que contiene Paragraf1 y luego cambiar Paragraf1 a Paragraf2 y viceversa, pero con la variable.
let temp = elmsParagraf1.innerHTML; elmsParagraf1.innerHTML = elmsParagraf2.innerHTML elmsParagraf2.innerHTML = temp¿Por qué no usa querySelector en lugar de usar querySelectorAll y elige el primer elemento?
Por cierto, aconsejo eliminar y volver a agregar los elementos del padre en lugar de usar innerHTML . El uso de innerHTML no preservaría a los oyentes y tendría peores actuaciones:
let elmsButton = document.querySelector("button"); let elmsParagraf1 = document.querySelector(".prvni"); let elmsParagraf2 = document.querySelector(".druhy"); elmsButton.addEventListener("click", () => { swapElements(elmsParagraf1, elmsParagraf2); }); function swapElements(elem1, elem2) { // Check if siblings if (elem1.parentElement !== elem2.parentElement) { console.error('No sibling elements!'); return; } elem1.replaceWith(elem2.cloneNode(true)); elem2.replaceWith(elem1.cloneNode(true)); }Ejemplo:
let elmsButton = document.querySelector("button"); elmsButton.addEventListener("click", () => { let elmsParagraf1 = document.querySelector(".prvni"); let elmsParagraf2 = document.querySelector(".druhy"); swapElements(elmsParagraf1, elmsParagraf2); }); function swapElements(elem1, elem2) { // Check if siblings if (elem1.parentElement !== elem2.parentElement) { console.error('No sibling elements!'); return; } elem1.replaceWith(elem2.cloneNode(true)); elem2.replaceWith(elem1.cloneNode(true)); } <button>Click me</button> <div class="prvni">I am the first div</div> <div class="druhy">I am the second div</div>