Calling a function from a JS file not working-CodePudding

I'm using React to view my pages. I came across this problem if I try to call a function from a .js file nothing happens. Basically, I have a small program that has two columns. Each column has a <p> tag that contains Column 1 and Column 2. There is a button below that once you click on it, both Columns should switch.

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: I tried to import the .js file that contains the function. Nothing is happening after clicking "Switch".

Method 2: Using onClick within a tag.

<div className="switch" id="switch_id" onClick={this.switchColumns}>Switch</div>

I get a couple of errors,

Uncaught TypeError: Cannot read properties of undefined (reading 'switchColumns') The above error occurred in the <index> component:

CodePudding user response：

On This line:

const switchCol = document.querySelectorAll(".switchCol");

There's no elements with the class of 'switchCol' so you're going to get an empty NodeList which causes the forEach loop to not execute so there are no click events on the columns themselves.

In the forEach block:

switchCol.forEach(switches => {
    switches.addEventListener("column1", switchColumns);
    switches.addEventListener("column2", switchColumns);
});

"column1" and "column2" are not valid event listeners, and there doesn't need to be two event listeners for one element. I think you mean to write the following:

switchCol.forEach(switch => switch.addEventListener('click', switchColumns))

Now onto your main switching column function:

function switchColumns(){
const makeSwitch1 = document.getElementById('column1');
document.getElementById('column2').appendChild(makeSwitch1);

const makeSwitch2 = document.getElementById('column2');
document.getElementById('column1').appendChild(makeSwitch2);

}

Variables makeSwitch1 and makeSwitch2 are going to be undefined as you do not have any elements with an id of column1 and column2 respectfully. Which is causing your issue with the second fix you tried.