CODEWITHSUNDEEP
javascript
SAI PALADUGU
SAI PALADUGU

Reputation: 51

Alternative methods to getElementById and Document.write

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>

Upvotes: 1

Views: 204

Answers (3)

marco
marco

Reputation: 11

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

Upvotes: 0

Maheer Ali
Maheer Ali

Reputation: 36574

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>

Upvotes: 1

Chris W.
Chris W.

Reputation: 23280

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>

Upvotes: 0

Related Questions