Javascript, rather not use find replace

1

I am looking to change any number entered into a text area by an increment of 4. Example if I type 10 into text field, and then clicked a button, it would become 14, If I typed 10 20 30 40, clicked a button, it would become 14 24 34 44. I suppose I could use regex and replace 10 to 14, but I think there is a better way using a math function or whatever else is a better idea than find replace. I need a text field and a button to run the script. It would be nice to be able to add any increment I want , so instead of 4 I could use 5 and so on. using 5, 10 would become 15 etc.

looking for some help with this, I am sure for lots of you this is very easy to do.

Thanks

1 Like
2

Welcome! This is a good interesting question. The first approach in my head is;

  1. input = String “10 20 30 40” addOn = 4
  2. Split string into Array; [10,20,30,40]
  3. Map the array and Parse each element, adding the addOn variable
  4. Join back together into a String

This is assuming all characters of the Input in the string are Numbers

1 Like
3

The input string would be all numbers. Any chance of showing a working example of this?

4

Sure: https://codepen.io/pjonp/pen/povOXxG
Use console, it’s JS only :wink:

let input = '10 20 33 44' //1. input = String
let addOn = 12 //1. addOn = Number
let splitToArr = input.split(' ') //2. split string into Array
let doMathOnArr = splitToArr.map((i)=>{ //3. Map the array
  return parseFloat(i) + addOn //3. Parse each element & add addOn 
})
let result = doMathOnArr.join(' ') //4. join back together into a String
console.log('1. ',result)
console.log('2. ',
            input.split(' ')
            .map((i)=>{
               return parseFloat(i) + addOn
              })
            .join(' ')
           )

The first part shows it step by step, the 2. log shows it all chained together.

6

That works great. Now I just need to figure out how to make a text field where I can put the numbers to be changed in. I have not messed with javascript in 12 years, I have forgot a ton of the basics. You have me down the right path though. Thanks

7

A LOT has changed in that time :rofl:

The curriculum does help (it’s how i learned) : https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/

For the form/input/button … that’s um a whole different world (HTML) but much easier than JS in my opinion. Feel free to fork that CodePen and add your HTML. And post back in this topic if you get stuck.

Happy coding!

8

No problem with making the form input or button, just need to make the input numbers run your script, instead of having them in the script beforehand. then output the results instead of the log method you used. I’ll sort it out, you did the hardest part. Thanks again

9

I’m having no luck trying to make the let input come from a text input. I’ve tried what I feel should of worked, but I am clearly doing something wrong. Instead of let input = ‘10 30 40 50’ I want those numbers to be determined from a text field.

 <html>
  <head>
    <script>






  let input = '10 30 40 50'
  let addOn = 12 //1. addOn = Number
  let splitToArr = input.split(' ') //2. split string into Array
  let doMathOnArr = splitToArr.map((i)=>{ //3. Map the array
    return parseFloat(i) + addOn //3. Parse each element & add addOn
  })
  let result = doMathOnArr.join(' ') //4. join back together into a String



    </script>
</head>
    <body>



<input id="Text1" type="text" value="11" />


	<button type="button" id="myBtn" onclick="document.write(result);">Run</button>
</body>






</html>
10

Can you post all of it in a codePen or similar to look at?

But, basically want to wrap all of the JS into a function. And your button onclick will call this function.

Then set the let input = document.getElementById ... value

11

I’ve tried let input = document.getElementById(“Text1”)

I get nothing. when I leave the numbers in the let input 10 30 40 50 it works perfect, I just cant seem to make it grab the element id text

12

seems to not let me add this part on this post 

<html>
  <head>
    <script>






  let input = document.getElementById("Text1")
  let addOn = 12 //1. addOn = Number
  let splitToArr = input.split(' ') //2. split string into Array
  let doMathOnArr = splitToArr.map((i)=>{ //3. Map the array
    return parseFloat(i) + addOn //3. Parse each element & add addOn
  })
  let result = doMathOnArr.join(' ') //4. join back together into a String



    </script>
</head>
    <body>



<input id="Text1" type="text" value="" />


	<button type="button" id="myBtn" onclick="document.write(result);">Run</button>
</body>
</html>
13

sorry its leaving out snippets of my html, try seeing it here https://justpaste.it/3jxja

14

I’ll take a look. Use the back tick button (shift ~) to wrap code. Use 3 to start and 3 to end

15

2 things;
First, all of the code needs to be in a function. And that function is called on the button click
Second, let input = document.getElementById(“Text1”).value You selected the correct element but didn’t isolate what you wanted.

16

Well that worked just fine. Now I want to make the 12 in addOn also changeable by text input.

I am trying to do things just a bit more advanced than I am at the moment. I appreciate the help bigtime and will learn from it. I am catching on and I also suspected I needed a function.

17

I’ll let you work on finding the answer yourself :slight_smile:

That’s the best way to learn.

18

What’s the practical use case of what you doing? This way it would be easier to suggest you something.

1 Like
19

was thinking this would work, but it does not.

let input = document.getElementById(“Text1”).value
let addOn = document.getElementById(“Text2”).value

21

Looks like you’re script is getting run before those DOM elements ( input and button) are being rendered.

Either move the script tags below the elements being selected, or wrap your script in a function, and call after loading:

addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('Text1').value
  const numbers = input.split(' ')
  // etc
})
22

Thanks, this is what I did to finally get it working.

let input = document.getElementById("Text1").value
let addOn = parseFloat(document.getElementById("Text2").value);
let splitToArr = input.split(' ')
let doMathOnArr = splitToArr.map((i)=>{ 
return parseFloat(i) + addOn 
})
let result = doMathOnArr.join(' ') 
document.write(result); 
};
1 Like