Member Avatar for aveao

I am needing help with what is probably a very easy task to complete, but I have been working on it for a while and need another pair of eyes to help me figure out the missing piece. I should know how to do this but for some reason the correct layout of the code is beyond my scope of vision. Below is one way i tried writing the code, including the html elements of the page. I have also tried using a function to perform the task.

<html>
<head>
        <title>Swapping the boxes!</title>
</head>
            <body>  <center>
    <h2>  <font color= "purple" face= "comic sans MS">
    Swap the text entered from one to the other! 
    </font>  </h2>
    <br/> <br/>


    Enter text in each box:
    <br/>
        <input type="text" id="txt1" size= "15" value= "" /> &nbsp&nbsp&nbsp <input type="text" id="txt2" size= "15" value= "" />  
        <br/>
            <input type= "button" value= "Swap Text"
        onclick = "text1= document.getElementById('txt1').value;
                    text1=parseFloat(text1);
                text2= document.getElementById('txt2').value;
                    text2=parseFloat(text2);
                document.getElementById('txt1').value= text2;
                document.getElementById('txt2').value= text1;" /> 
        </center>
   </body>
</html>
Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 2 Replies
  • 86 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by aveao

Dani AI

Generated

A quick addendum that ties the thread together: 's reply gives a simple, correct way to swap the two fields and it resolved 's issue. A couple of practical improvements and cautions to make the swap more robust and modern.

Avoid converting to numbers unless intended — parseFloat will turn non-numeric text into NaN, so treat the inputs as strings unless numeric math is required (see the parseFloat docs). Keep HTML and JavaScript separate by attaching an event listener rather than using onclick attributes; this improves maintainability and accessibility (see addEventListener guidance). Cache the input elements once, then swap their .value properties. In modern JavaScript a concise swap uses destructuring:

const a = document.getElementById('txt1');
const b = document.getElementById('txt2');
[a.value, b.value] = [b.value, a.value];

Destructuring is supported in modern browsers; for older environments fall back to a temporary variable. Also ensure each input has an associated label for screen readers, trim unwanted whitespace if needed, and, if preserving focus/caret is important, save document.activeElement and restore it after the swap. For reference: MDN on adding event listeners (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) and destructuring assignment (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).

Recommended Answers

All 2 Replies

Member Avatar for noelthefish 
<html>
<head>
<title>Swapping the boxes!</title>
</head>
<body> <center>
<h2> <font color= "purple" face= "comic sans MS">
Swap the text entered from one to the other!
</font> </h2>
<br/> <br/>


Enter text in each box:
<br/>
<input type="text" id="txt1" size= "15" value= "" /> &nbsp&nbsp&nbsp <input type="text" id="txt2" size= "15" value= "" />
<br/>
<input type= "button" value= "Swap Text"
onclick = "swaptext(document.getElementById('txt1').value,document.getElementById('txt2').value)";/>
</center>
</body>
</html>

<script>

	function swaptext(txt1,txt2)
    {
    	document.getElementById('txt1').value = txt2;
    	document.getElementById('txt2').value = txt1;
	}
</script>

this will do what you are after

Member Avatar for aveao

Thank you so much this worked perfectly. I was so close in one of my attempts that I didn't save. Thank you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.