-1

I'm simply working on forEach, and I'm trying to get the values from the user input. If I directly give the value, the code is working but when I submit the value from input box, the code doesn't give expected results. I know that there is nothing to do with forEach in this case but can anyone say what should I do to fix this error.

In the first case, I'm submitting the towhat value, and this code is working well.

function hof() {
  var myString = document.getElementById("thetext").value;
  var sep = document.getElementById("sep").value;
  var limit = document.getElementById("limit").value;
  var towhat = document.getElementById("towhat").value;
  var fruits = myString.split(sep, limit);
  let text = "";
  fruits.forEach(myFunction);

  function myFunction(item, index) {
    text += index + ": " + item + "\n";
  }
  document.getElementById("demo").value = text;
}
textarea {
  width: 100%;
  height: 200px
}
<textarea id="thetext" readonly>Hello, this is just a sample text</textarea><br/><br/> 
separator : <input id="sep" value=" " readonly></input>
<br/><br/> 
For how many? <input id="limit" value="100" readonly></input><br/><br/> 
To what? <input id='towhat' value='index + ": " + item + "\n"' readonly></input><br/><br/>
<button id="" onclick="hof()">hooooof</button> <br/><br/>
<textarea id="demo"></textarea>

However, the second code doesn't work. But why? Both have the same values except a minor change, which is also almost the same as the first one. What should i do to fix this?

function hof() {
  var myString = document.getElementById("thetext").value;
  var sep = document.getElementById("sep").value;
  var limit = document.getElementById("limit").value;
  var towhat = document.getElementById("towhat").value;
  var fruits = myString.split(sep, limit);
  let text = "";
  fruits.forEach(myFunction);

  function myFunction(item, index) {
    text += towhat;
  }
  document.getElementById("demo").value = text;
}
textarea {
  width: 100%;
  height: 200px
}
<textarea id="thetext" readonly>Hello, this is just a sample text</textarea><br/><br/> 
separator : <input id="sep" value=" " readonly></input><br/><br/> 
For how many? <input id="limit" value="100" readonly></input><br/><br/> 
To what? <input id='towhat' value='index + ": " + item + "\n"' readonly></input><br/><br/>
<button id="" onclick="hof()">hooooof</button> <br/><br/>
<textarea id="demo"></textarea>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Kraken
  • 101
  • 8
  • 3
    It looks like you want to eval() - but this shouldn't be used since you'd be using it on user input (which opens up your site to security vulnerabilities). I would suggest replacing your "Too what" format to use a standard template, such as `{index}: {item} \n` to specify the desired format, and then use `.replace()` to substitute the `{variable}` with the appropriate value – Nick Parsons Apr 19 '22 at 10:12
  • What are you trying to achieve? Code is running and doing what is suppose to do, loop the text and add the input to itself in the loop. – Paun Narcis Iulian Apr 19 '22 at 10:15
  • @NickParsons, yes eval() is what I'm looking for. It's working. And, Do you mean template literate as an alternative?. By the way, I'm not using it for user input. Just for personal learning. Thank you – Kraken Apr 19 '22 at 12:27
  • @Kraken - if you can avoid `eval()`, which you can do here, then you shouldn't use it. By template I mean that you shouldn't be inputting JS code into your input, but instead put in some text that you yourself know how to parse and manage (like the example I gave above). In the example I gave above, you can "parse"/substitute your values by using `.replace()` – Nick Parsons Apr 19 '22 at 14:15

1 Answers1

0

I think I found the problem.

// "towhat" is not a function, this is a string value.    
var towhat = document.getElementById("towhat").value;

// When you write it like this:
text += towhat;

// A code works like this:
text += 'index + ": " + item + "\n"';

You can get just index value by dynamic.

Yasin B. Kalkan
  • 267
  • 1
  • 9