JavaScript function to modify text on a button click

zachvaldez
zachvaldez used Ask the Experts™
on
I have an input text and what I'd ;like to happen is when a a user enters a number in the input text and an input button is clicked, it  doubles the value of the text like enter 10 result is 20.
However, when a text is entered instead of a number, it would write  "Your input is wrong" in the same input text.
There are 2 inputs, one is a text and other is a button.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

Please try below

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="Mickey">

<p>Click the button to change the value of the text field.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
	alert(document.getElementById("myText").value);
	if (document.getElementById("myText").value==null || !parseInt(document.getElementById("myText").value))
	{
		document.getElementById("myText").value = "Input is Wrong";
	}
	else
	{
		var txt1 = document.getElementById("myText").value;
		document.getElementById("myText").value = parseInt(txt1)*2;
	}
}
</script>

</body>
</html>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Here is how to do it your way - I would not do it like this - putting the error message in the text box is not a good idea - I would consider putting it in a separate element (<span> or <div>) below the input.
HTML
<input type="text" name="myvalue">
<input type="button" id="checkmyvalue" value="double me">

Open in new window

JavaScript
<script>
var myvalue = document.querySelector('input[name="myvalue"]');
document.getElementById('checkmyvalue').addEventListener('click', function() {
   myvalue.value = isNaN(myvalue.value) ?  'Your input is wrong' : myvalue.value * 2;
   
});
</script>

Open in new window

Author

Commented:
I may be doing something not right. I'm trying to simulate Julian solution and I''m not getting any return. Is there a function to be called from the script when clicking the button? I assume that was the problem. Thanks
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I really wish to try your solution Julian,but it is not executing, The code really is cool using the addlistener function. Many Thanks.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You need to show us your implementation - and you need to give more information about "not executing" - is there an error? What are you expecting to happen? what is actually happening?

Show us the code as you have it for starters.

Author

Commented:
I try to implement your code but I said it may be me but when I click the button, nothing happens.
Here's the implementation

<!DOCTYPE html>
<html>

   <head>
   <meta charset="utf-8">
   <title>Math</title>
   </head>
   <body>
  
      <form>
        <input id="myvalue"  type="text" value="7"/>
        <input id="double" type="button" value="Double"/>
      </form>
      <script>
       
          var myvalue = document.oncancel('input[name="myvalue"]');
          document.getElementById('double').addEventListener('click', function() {
             myvalue.value = isNaN(myvalue.value)?  'Your input is wrong' : myvalue.value * 2;  
          });
        </script>
    

   </body>
</html>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
var myvalue = document.oncancel('input[name="myvalue"]');

Open in new window

What is oncancel doing in there?
My code used querySelector on the name attribute of the control.
a) You don't have a name attribute on your control
b) Even if you did you are using oncancel for some reason

Either
Add name="myvalue" to the input
And do
var myvalue = document.querySelector('input[name="myvalue"]');

Open in new window

Or
Change to
var myvalue = document.getElementById('myvalue');

Open in new window


As you have it you have not implemented my code.

Author

Commented:
I admit it was my error.  But since I don;t have a name attribute, I use id="myvalue"... instead and it worked/

Author

Commented:
Thanks Experts for the two different ways of arriving to the solution.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.
you are welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial