CODEWITHSUNDEEP
javascripthtml
Techo Gwan
Techo Gwan

Reputation: 88

How to Output a Js Function Twice on the same page

Hello here I'm trying to Output my function on two separate divs in my project but if I simply output the same I'd it cancels the whole code and nulls the output here is the code.

<script>
function randomString() {
            //initialize a variable having alpha-numeric characters
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";

            //specify the length for the new string to be generated
    var string_length = 10;
    var randomstring = '';

            //put a loop to select a character randomly in each iteration
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
             //display the generated string 
    document.getElementById("randomfield").innerHTML = randomstring;
}
</script>

Then on the body I use

<body onload="randomString();">

<div>
<p id="randomfield"></p>
</div>
</body>

The thing is I want to Output the same string on the page but on a different div maybe at the footer but if I proceed to add

<body onload="randomString();">


<div>
<p id="randomfield"></p>
</div>

<hr>
<footer>

<p id="randomfield"></p>

</footer>

</body>

On the same page it cancels the whole code and nullifies the output. How do I fix this i barely have knowledge of Js

Upvotes: 0

Views: 467

Answers (3)

Faheem azaz Bhanej
Faheem azaz Bhanej

Reputation: 2396

I think you can solve this by creating dynamic p tag with same id. There is no var datatype in javascript change it to let.

function randomString() {
    let characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    let randnum = document.getElementById("randnum") 

    let stringLength = 10;
    let tempRandomString = '';
    
    for (let i = 0; i < stringLength; i++) {
        let randNum = Math.floor(Math.random() * characters.length);
        tempRandomString += characters.substring(randNum, randNum + 1);
    }
    
    for (var i = 0; i < 2; i++) {
        const elem = document.createElement(`p`);
        elem.id = tempRandomString;
        elem.innerText= tempRandomString;
        randnum.appendChild(elem);
    }
}
<html>
  <title>Web Page</title>
  <head>

  </head>
  <body onload="randomString();">

    <div id="randnum">

    </div>
  </body> 
</html>

Upvotes: 1

vector
vector

Reputation: 1022

This is happening because you're using same "id" more than once, which is not valid.

You can change the id to class instead and can use querySelectorAll to loop through each element consisting of that class to display your result.

function randomSSSSSString() {
            //initialize a variable having alpha-numeric characters
    var charssssss = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";

            //specify the length for the new string to be generated
    var sssssstring_length = 10;
    var randomsssssstring = '';

            //put a loop to select a character randomly in each iteration
    for (var i=0; i<sssssstring_length; i++) {
        var rrrrrrnum = Math.floor(Math.random() * charssssss.length);
        randomsssssstring += charssssss.substring(rrrrrrnum,rrrrrrnum+1);
    }
             //display the generated string 
       var i_want_show_here = document.querySelectorAll(".rrrrrrandomfield")
       Array.prototype.forEach.call(i_want_show_here, function(el) {
        el.innerHTML = randomsssssstring
      });
}
<body onload="randomSSSSSString();">




<div>
<p class="rrrrrrandomfield"></p>
</div>

<hr>
<footer>

<p class="rrrrrrandomfield"></p>

</footer>

</body>

Upvotes: 1

Deepak
Deepak

Reputation: 2742

You are using the same id in both areas. You have to specify different id to have them work:

function randomSSSSSString() {
  //initialize a variable having alpha-numeric characters
  var charssssss = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";

  //specify the length for the new string to be generated
  var sssssstring_length = 10;
  var randomsssssstring = '';

  //put a loop to select a character randomly in each iteration
  for (var i = 0; i < sssssstring_length; i++) {
    var rrrrrrnum = Math.floor(Math.random() * charssssss.length);
    randomsssssstring += charssssss.substring(rrrrrrnum, rrrrrrnum + 1);
  }
  //display the generated string 
  document.getElementById("rrrrrrandomfield").innerHTML = randomsssssstring;
  document.getElementById("rrrrrrandomfield2").innerHTML = randomsssssstring;
}
<body onload="randomSSSSSString();">
  <div>
    <p id="rrrrrrandomfield"></p>
  </div>
  <hr>
  <footer>
    <p id="rrrrrrandomfield2"></p>
  </footer>
</body>

Upvotes: 1

Related Questions