I’m trying to make a function that switches two divs. Another function adds the first div to where the second div is located and vice-versa. I’m using React and JS.
java.js (functions)
const switchCol = document.querySelectorAll("div");
const ab = document.getElementById("switch_id");
const a = document.getElementById("switchB");
const b = document.getElementById("switchA");
if(ab) {
ab.addEventListener("click", switchColumns, false);
a.addEventListener("click", switchA, false);
a.addEventListener("click", switchB, false);
}
switchCol.forEach(switches => switches.addEventListener('click', switchColumns));
switchCol.forEach(switches => switches.addEventListener('click', switchA));
switchCol.forEach(switches => switches.addEventListener('click', switchB));
const col1 = document.getElementById('column1_id');
const col2 = document.getElementById('column2_id');
const cols1 = document.getElementById('column_one');
const cols2 = document.getElementById('column_two');
let col11 = document.getElementsByClassName('column1');
const col12 = document.getElementsByClassName('column2');
const cols = document.getElementsByClassName('columns');
//switch both divs
function switchColumns(){
for (let i = 0; i < cols.length; i++){
col11[i].append(col2);
col12[i].append(col1);
}
}
//add div A to div B
function switchA(){
col12.append(col1);
}
//add div B to div A
function switchB(){
col11.append(col2);
}
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="column_one">
<div className="column1" id="column1_id">
<p>Column1</p>
</div>
<div className="switchToB" id="switchB">Switch to B</div>
</div>
<div className="column_two">
<div className="column2" id="column2_id">
<p>Column 2</p>
</div>
<div className="switchToA" id="switchA">Switch to A</div>
</div>
</div>
<div className="switch" id="switch_id">Switch</div>
<script src="./java.js"/>
</div>
);
}
}
export default index;
When I click on any of the options, this is what I get.
The errors that output after clicking the options
