Click to add sentence + array number and result with <br> on each line

Question

I'm starting to learn how to code and I guess this is really easy for you but it's been VERY hard for me to find out on how to do it.

I want to be able to add a number on and store that number and get a result like this:

Lets say I typed number 2, then 34, then 65 and 234.

Result would be like:

<integer>2</integer>
<integer>34</integer>
<integer>65</integer>
<integer>234</integer>

Do you see what i mean? I need to have the integer string plus whatever number I type and the result would need to add an br.

function myFunction() {
  var x = parseFloat(document.getElementById("numb").value);
  var result = document.getElementById("result");
  var array = [];

  array.push("<integer>" + x + "</integer>");
  console.log(array);
  result.innerHTML = array;

}

<h1>Integer</h1>
<h2>Enter number</h2>

<input type="number" id="numb">
<button id="submitbutton" type="button" onclick="myFunction()">Submit</button>


<h1>
  <div>Result: <span id="result"> xxx </span></div>
</h1>

Move var array = []; outside the function You create a new array each time. I created you a snippet and fixed the spelling of Integer — mplungjan
– mplungjan, Commented Jul 20, 2018 at 18:07
@mplungjan is 100% correct but I thought I would add that you should probably read up on scope and closures just to give you a better understanding of why simply moving the array declaration out of the function solves your problem. scotch.io/tutorials/understanding-scope-in-javascript — Adam H
– Adam H, Commented Jul 20, 2018 at 18:08
Yes @mplungjan ty for that it partially worked. The result Im getting is still only the number I typed and not the whole "<interger>array</interger>" u see? also need the <br> after every .push on the array! :( — Marcell
– Marcell, Commented Jul 20, 2018 at 18:10
ty once again! Now I have the br but the result is still only the number! Is there a way for me to add "<interger></interger>" on each result as well please? — Marcell
– Marcell, Commented Jul 20, 2018 at 18:12

mplungjan · Accepted Answer · 2018-07-20 18:21:52Z

1

move the var array out of the function scope to not create a new one each time
Join the array
Use CSS to markup your integer tag

PS: If you want to SEE the tags. change the code below to

array.push("&lt;integer>" + parseInt(x) + "&lt;/integer>");

Here the tags are styled instead

var array = [];

function myFunction() {
  var x = document.getElementById("numb").value.trim();
  var result = document.getElementById("result");

  if (!isNaN(x) && x!="") { // test valid number
    array.push("<integer>" + parseInt(x) + "</integer>");
   //  console.log(array);
    result.innerHTML = array.join("<br/>");
  }

}

integer { font-weight:bold; color:teal }

<h3>Integer</h3>
<h4>Enter number</h4>
<input type="number" id="numb">
<button id="submitbutton" type="button" onclick="myFunction()">Submit</button>


<h1>
  <div>Result: <span id="result"> xxx </span></div>
</h1>

edited Jul 20, 2018 at 18:21

answered Jul 20, 2018 at 18:12

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marcell Over a year ago

I see what you mean! but when I click on submit all I get are the numbers I typed and dont have "<interger></interger>" in the middle! Weirdly enough on the console.log I can see that but not on the result page! :(

mplungjan Over a year ago

<integer> is a tag. It is not understood by the browser unless you give it a style. See my <integer> is coloured

mplungjan Over a year ago

If you want to see the tags, change to "<integer>"+x+"<integer>";

Marcell Over a year ago

IT WORKED! OMG you are amazing! Thank you VERY MUCH! Im really happy! thank you! :)

Collectives™ on Stack Overflow

Click to add sentence + array number and result with <br> on each line

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related