Estoy usando React para ver mis páginas. Me encontré con este problema si trato de llamar a una función desde un archivo .js, no pasa nada. Básicamente, tengo un pequeño programa que tiene dos columnas. Cada columna tiene una etiqueta <p> que contiene la Columna 1 y la Columna 2. Hay un botón debajo que una vez que haga clic en él, ambas Columns deberían cambiar.
index.js
import "../style.css"; //import "./java.js"; class index extends React.Component { render() { return( <div className="container"> <div className="columns" id="columnsToSwitch"> <div className="column1" id="column1_id"> <p>Column1</p> </div> <div className="column2" id="column2_id"> <p>Column 2</p> </div> </div> <div className="switch" id="switch_id" onClick={this.switchColumns}>Switch</div> </div> ); } } export default index; java.js
const switchCol = document.querySelectorAll("div.columns"); const el = document.getElementById("switch_id"); if(el) { el.addEventListener("click", switchColumns, false); } switchCol.forEach(switches => switches.addEventListener('click', switchColumns)); function switchColumns(){ const makeSwitch1 = document.getElementById('column1_id'); document.getElementById('column2_id').appendChild(makeSwitch1); const makeSwitch2 = document.getElementById('column2_id'); document.getElementById('column1_id').appendChild(makeSwitch2); } Method 1: Traté de importar el archivo .js que contiene la función. No sucede nada después de hacer clic en "Cambiar".
Method 2: Usar onClick dentro de una etiqueta.
<div className="switch" id="switch_id" onClick={this.switchColumns}>Switch</div>me sale un par de errores,
Uncaught TypeError: Cannot read properties of undefined (reading 'switchColumns') The above error occurred in the <index> component:
En esta línea:
const switchCol = document.querySelectorAll(".switchCol"); No hay elementos con la clase de 'switchCol', por lo que obtendrá una lista de NodeList vacía que hace que el bucle forEach no se ejecute, por lo que no hay eventos de clic en las columnas.
En el bloque forEach :
switchCol.forEach(switches => { switches.addEventListener("column1", switchColumns); switches.addEventListener("column2", switchColumns); });"column1" y "column2" no son detectores de eventos válidos y no es necesario que haya dos detectores de eventos para un elemento. Creo que quieres escribir lo siguiente:
switchCol.forEach(switch => switch.addEventListener('click', switchColumns))Ahora en su función principal de columna de conmutación:
function switchColumns(){ const makeSwitch1 = document.getElementById('column1'); document.getElementById('column2').appendChild(makeSwitch1); const makeSwitch2 = document.getElementById('column2'); document.getElementById('column1').appendChild(makeSwitch2);}
Las variables makeSwitch1 y makeSwitch2 no estarán definidas ya que no tiene ningún elemento con una identificación de column1 y column2 . Lo que está causando su problema con la segunda solución que intentó.