How to Output a Js Function Twice on the same page-CodePudding

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 onl oad="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 onl oad="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

CodePudding user response：

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 onl oad="randomString();">

    <div id="randnum">

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

CodePudding user response：

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 onl oad="randomSSSSSString();">




<div>
<p ></p>
</div>

<hr>
<footer>

<p ></p>

</footer>

</body>

CodePudding user response：

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 onl oad="randomSSSSSString();">
  <div>
    <p id="rrrrrrandomfield"></p>
  </div>
  <hr>
  <footer>
    <p id="rrrrrrandomfield2"></p>
  </footer>
</body>

CodePudding user response：

It is because you are using id="rrrrrrandomfield" twice. You can only use a unique id once. Use instead and then also

document.getElementsByClassName("rrrrrrandomfield").innerHTML = randomsssssstring;