I am trying to make a button change two divs and their children elements. Their children elements include an and with text. I just want to click the button and make the entire content swap places.
Here is the html and javascript.
function switchTokens() {
var obj1 = document.getElementById('from_token_select').value;
var obj2 = document.getElementById('to_token_select').value;
var temp = obj1;
obj1 = obj2;
obj2 = temp;
// Save the swapped values to the input element.
document.getElementById('from_token_select').value = obj1;
document.getElementById('to_token_select').value = obj2;
}<div class="token_select" id="from_token_select">
<img src="https://image-placeholder.com/images/actual-size/75x100.png" class="token_image" id="from_token_img" />
<span id="from_token_text">from_token_text</span>
</div>
<button onClick="switchTokens()" id="swap_token_address" class="fa-solid fa-arrows-up-down">switchTokens Btn</button>
<div class="token_select" id="to_token_select">
<img src=https://image-placeholder.com/images/actual-size/88x31.png class="token_image" id="to_token_img" />
<span id="to_token_text">to_token_text</span>
</div>As I understand you'd like to swap the entire contents of the divs? If that's the case, this JS does the trick:
function switchTokens() {
var obj1 = document.getElementById('from_token_select').innerHTML;
var obj2 = document.getElementById('to_token_select').innerHTML;
// Save the swapped values to the input element.
document.getElementById('from_token_select').innerHTML = obj2;
document.getElementById('to_token_select').innerHTML = obj1;
}