How to Output a Js Function Twice on the same page

Question

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

The problem here is you have the same id twice which is invalid html. Maybe use a class instead? — DownloadPizza
– DownloadPizza, Commented Dec 15, 2021 at 9:37
Please change your keyboard to write only single s and r :D — Justinas
– Justinas, Commented Dec 15, 2021 at 9:39

Deepak · Accepted Answer · 2021-12-15 09:41:03Z

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>

Now i just learned something new from your comments, thanks alot I wish I could learn javascript in full but DIY is quite hard

Dharman · Accepted Answer · 2021-12-15 09:51:20Z

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>

Faheem azaz Bhanej · Accepted Answer · 2021-12-15 10:29:57Z

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>

Collectives™ on Stack Overflow

How to Output a Js Function Twice on the same page

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related