Alternative methods to getElementById and Document.write

Question

I am making a function that needs to use a for loop to output all numbers between two numbers. If the user chooses 1 and 4, my function would output 1,2,3,4. Although I have my function working just as I needed it to, the output using document.GetElementById doesn't want to co-operate (only overwrites final answer(4)), and document.write() takes me to another page which I don't want. What I need is a method that replaces my p id='replaceOne' which puts all the numbers on the same page. Thank you!

function Counter() {
  var number1 = document.getElementById('number1').value;
  var number2 = document.getElementById('number2').value;
  for (i = number1; i <= number2; i++) {
    var answer1 = [i];
    document.write(answer1);
  }
}

<html>
  <head>
    <title>
      For Loops excercise 1
    </title>
  </head>
<body>
  <table>
    <tr>
      <td align="left" valign="top">
<p class=headerOne><h3>Counter a</h3>
<textarea id="number1" class="box"></textarea><br>
<textarea id="number2" class="box"></textarea><br>
<button type="button" onclick="Counter()">Find range</button><br>
<p>Your result is: </p>
<p id="replaceOne"></p>
      </td>
</body>
</html>

_"and `document.write()` takes me to another page"_ - No, it just overwrites the current page -> https://developer.mozilla.org/en-US/docs/Web/API/Document/write — Andreas, Feb 21 '19 at 17:55
Possible duplicate of [What are alternatives to document.write?](https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write) — Heretic Monkey, Feb 21 '19 at 17:55
Why not assemble the whole string `'1,2,3,4'` and write it in a single statement? Put the numbers in an array, say `nums`, and then use `nums.join(',')` — John Coleman, Feb 21 '19 at 17:55
I'm not seeing where you need an alternative to `getElementById`... — Heretic Monkey, Feb 21 '19 at 17:56
I need all my numbers to be replaced with my id="replaceOne", basically I need all the numbers to be placed underneath "your result is:". My issue is that document.GetElementById = answer1; gives me only the final listed number (1-4 would give me only 4), and document.write() as stated overwrites the whole page. I need an answers to stay on the same page and list all the numbers! thanks a lot! — SAI PALADUGU, Feb 21 '19 at 18:10

Maheer Ali · Accepted Answer · 2019-02-21T18:48:56.830

1

You can create a function with short name which do something same as document.getElementById and add it to innerHTML of element.
Function: const elm = id => document.getElementById(id). This line is just an Arrow Function which return element with id provided to that function. It is same as

function elm(id){
    return document.getElementById(id)
}

Updating innerHTML: elm('replaceOne') returns an element. Every element has a property innerHTML. In this case the innerHTML is ''. I am using Addition Assignment to add the i to existing innerHTML. The line elm('replaceOne').innerHTML += i; is same as

elm('replaceOne').innerHTML = elm('replaceOne').innerHTML + i;

const elm = id => document.getElementById(id)
function Counter() {
  var number1 = document.getElementById('number1').value;
  var number2 = document.getElementById('number2').value;
  for (i = number1; i <= number2; i++) {
    var answer1 = [i];
    elm('replaceOne').innerHTML += i;
  }
}

  <table>
    <tr>
      <td align="left" valign="top">
<p class=headerOne><h3>Counter a</h3>
<textarea id="number1" class="box"></textarea><br>
<textarea id="number2" class="box"></textarea><br>
<button type="button" onclick="Counter()">Find range</button><br>
<p>Your result is: </p>
<p id="replaceOne"></p>
      </td>
</table>

edited Feb 21 '19 at 18:48

answered Feb 21 '19 at 18:02

Maheer Ali

35,834
5
42
73

Okay so this worked for me! However, I don't understand the following two lines; const elm = id => document.getElementById(id) elm('replaceOne').innerHTML += i; Could you please explain the purpose of the two lines, as in my class we've never worked with "= id => document.getElementById(id)" and "+= i;" – SAI PALADUGU Feb 21 '19 at 18:34
@SAI PALADUGU I have explained a little and added some some for your understanding. Hope it will help – Maheer Ali Feb 21 '19 at 18:49
Thanks a lot! Your example of showing me the full function for the arrow function really helped to interpret its use. Also, your explanation for the second part was just what I needed. Thanks for the help! – SAI PALADUGU Feb 22 '19 at 04:18
@SAI PALADUGU accept the answer if you are satisfied. – Maheer Ali Feb 22 '19 at 04:19
Where is that option :/ ? – SAI PALADUGU Feb 22 '19 at 15:11

Chris W. · Answer 2 · 2019-02-21T18:11:43.273

0

Not entirely sure I understand the question but sounds like you're just looking for something like this?

const $ = function(id) { return document.getElementById(id) },
      counter = function() {
        let answer = [],
            number1 = $('number1').value,
            number2 = $('number2').value;
        for (i = number1; i <= number2; i++) {
          answer.push(i);        
        }
        $('replaceOne').innerHTML = answer;
      };
      
      
// Or es6 is nice too, or can make this whole thing even smaller;
// but for the sake of simple example, not shown here.

<h3>Counter</h3>
<textarea id="number1" class="box"></textarea><br>
<textarea id="number2" class="box"></textarea><br>
<button type="button" onclick="counter()">Find range</button><br>
<p>Your result is: <strong id="replaceOne"></strong></p>

edited Feb 21 '19 at 18:11

answered Feb 21 '19 at 17:59

Chris W.

22,835
3
60
94

Thanks for the help! Tip: Don't use $ as a variable name because it may confuse a beginner to js :/ However, I understand your method. – SAI PALADUGU Feb 22 '19 at 04:22
@SAIPALADUGU actually that was intentional because it's the same use case I the majority of what jquery's usage ends up being (though most of the time jquery is never necessary). So it was more of a mimic reference. Cheers – Chris W. Feb 22 '19 at 14:21

user4417258 · Answer 3 · 2019-02-22T08:51:22.730

0

Using document.getElementById is the right way to do this. You try to write it inside the for loop, that why you have only the first item. You should concatenate your result in a string and set it after your loop

edited Feb 22 '19 at 08:51

answered Feb 21 '19 at 18:01

user4417258

11
2

Alternative methods to getElementById and Document.write

3 Answers3