Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Call several times a javascript on the same page

hey guy
I'm working a MCQ and would like to have random number to be display for my question and my answers.

basicaly, I have 12 names assign to 12 numbers and I have to choose in 5 answers which one is the correct one.

First question is working because, it is the fisrt time it is called but all the next questions are not working.

My questions is like this:
HTML:
<div class="wp-block-columns has-3-columns">
<div class="wp-block-column">
<p id="left">aucun...<div id="question1"></div></p>
<p id="left">purge...<div id="question2"></div></p>
<p id="left">fripé...<div id="question3"></div></p>
<p id="left">saxes...<div id="question4"></div></p>
</div>
<div class="wp-block-column">
<p id="left">torde...<div id="question5"></div></p>
<p id="left">mufle...<div id="question6"></div></p>
<p id="left">oraux...<div id="question7"></div></p>
<p id="left">dégel...<div id="question8"></div></p>
</div>
<div class="wp-block-column">
<p id="left">dépôt...<div id="question9"></div></p>
<p id="left">herbe...<div id="question10"></div></p>
<p id="left">anaux...<div id="question11"></div></p>
<p id="left">eûtes...<div id="question12"></div></p>
</div>
</div>
<h3 class="aligncenter">aucun ?</h3>
Answers:
HTML:
<p id="rep1"></p><p id="rep4"></p><p id="rep6"></p><p id="rep2"></p><p id="rep12"></p>

My script:
JavaScript:
<script>
        let name1 = document.getElementById("question1").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg1 = document.getElementById('rep1');
        msg1.innerHTML = name1;
</script>
<script>
        let name2 = document.getElementById("question2").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg2 = document.getElementById('rep2');
        msg2.innerHTML = name2;
</script>
<script>
        let name3 = document.getElementById("question3").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg3 = document.getElementById('rep3');
        msg3.innerHTML = name3;
</script>
<script>
        let name4 = document.getElementById("question4").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg4 = document.getElementById('rep4');
        msg4.innerHTML = name4;
</script>
<script>
        let name5 = document.getElementById("question5").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg5 = document.getElementById('rep5');
        msg5.innerHTML = name5;
</script>
<script>
        let name6 = document.getElementById("question6").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg6 = document.getElementById('rep6');
        msg6.innerHTML = name6;
</script>
<script>
        let name7 = document.getElementById("question7").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg7 = document.getElementById('rep7');
        msg7.innerHTML = name7;
</script><script>
        let name8 = document.getElementById("question8").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg8 = document.getElementById('rep8');
        msg8.innerHTML = name8;
</script>
<script>
        let name9 = document.getElementById("question9").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg9 = document.getElementById('rep9');
        msg9.innerHTML = name9;
</script>
<script>
        let name10 = document.getElementById("question10").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg10 = document.getElementById('rep10');
        msg10.innerHTML = name10;
</script>
<script>
        let name11 = document.getElementById("question11").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg11 = document.getElementById('rep11');
        msg11.innerHTML = name11;
</script>
<script>
        let name12 = document.getElementById("question12").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg12 = document.getElementById('rep12');
        msg12.innerHTML = name12;
</script>

I'm 100% beginner with java so be nice ;-) I'm running the all thing with learndash on a wordpress site.

I hope you will be able to help me, Many Thanks Last question, my script is only working when it is after my MCQ not before, could you please explain why ?
 
Sorry, forgot to say that I made a DIV with that ID that houses the Answers section.
Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
    *{
        box-sizing: border-box;
    }
</style>
<title>website</title>
</head>
<body>
<div class="wp-block-columns has-3-columns">
    <div class="wp-block-column">
        <p class="left">aucun...<div id ="question1"></div></p>
        <p class="left">purge...<div id ="question2"></div></p>
        <p class="left">fripé...<div id ="question3"></div></p>
        <p class="left">saxes...<div id ="question4"></div></p>
    </div>
    <div class="wp-block-column">
        <p class="left">torde...<div id ="question5"></div></p>
        <p class="left">mufle...<div id ="question6"></div></p>
        <p class="left">oraux...<div id ="question7"></div></p>
        <p class="left">dégel...<div id ="question8"></div></p>
    </div>
    <div class="wp-block-column">
        <p class="left">dépôt...<div id ="question9"></div></p>
        <p class="left">herbe...<div id ="question10"></div></p>
        <p class="left">anaux...<div id ="question11"></div></p>
        <p class="left">eûtes...<div id ="question12"></div></p>
    </div>
</div>
<!-- Note the new DIV and what it contains -->
<div id="answers">
    <h3 class="aligncenter">aucun ?</h3>
    <br>
</div>
<script>
const myArray = document.getElementsByClassName('left');
for (let i = 1; i < myArray.length+1; i++) {
    let name1 = document.getElementById("question"+ i);
    name1.innerHTML = Math.floor(Math.random() * 10000)+1000;
    const addOn = document.createElement("p");
    addOn.innerHTML = name1.innerHTML;
    document.getElementById("answers").appendChild(addOn);
}
</script>
</body>
</html>
 
hey.
So I went to check it on W3schcools and it is working but as soon as I put it on line in my case, it is not working.
an other thing I just discovered is than implementing the question is not always working:

The idea would be to do a quiz. I have 150 questions in the database ( so far ). All question have the same structure "<div class="wp-block-columns......... to .......
"question.."></div></p> </div></div>"

But in my quiz questions are random so the first questions could be :
HTML:
"<div class=""wp-block-columns has-3-columns"">
<div class=""wp-block-column"">
<p class=""left"">jerez...</p><div id=""question1129""></div>
<p class=""left"">romps...</p><div id=""question1130""></div>
<p class=""left"">houle...</p><div id=""question1131""></div>
<p class=""left"">vulgo...</p><div id=""question1132""></div>
</div>
<div class=""wp-block-column"">
<p class=""left"">capon...</p><div id=""question1133""></div>
<p class=""left"">écart...</p><div id=""question1134""></div>
<p class=""left"">sisal...</p><div id=""question1135""></div>
<p class=""left"">rates...</p><div id=""question1136""></div>
</div>
<div class=""wp-block-column"">
<p class=""left"">duvet...</p><div id=""question1137""></div>
<p class=""left"">havre...</p><div id=""question1138""></div>
<p class=""left"">ornai...</p><div id=""question1139""></div>
<p class=""left"">aphte...</p><div id=""question1140""></div>
</div>
</div>
<h3 class=""aligncenter"">ornai ?</h3>"

Then second
HTML:
"<div class=""wp-block-columns has-3-columns"">
<div class=""wp-block-column"">
<p class=""left"">gerbé...</p><div id=""question313""></div>
<p class=""left"">robes...</p><div id=""question314""></div>
<p class=""left"">rêvât...</p><div id=""question315""></div>
<p class=""left"">fêtes...</p><div id=""question316""></div>
</div>
<div class=""wp-block-column"">
<p class=""left"">logis...</p><div id=""question317""></div>
<p class=""left"">uvale...</p><div id=""question318""></div>
<p class=""left"">tache...</p><div id=""question319""></div>
<p class=""left"">glacé...</p><div id=""question320""></div>
</div>
<div class=""wp-block-column"">
<p class=""left"">furax...</p><div id=""question321""></div>
<p class=""left"">jouis...</p><div id=""question322""></div>
<p class=""left"">sorte...</p><div id=""question323""></div>
<p class=""left"">taise...</p><div id=""question324""></div>
</div>
</div>
<h3 class=""aligncenter"">rêvât ?</h3>"
and last one
HTML:
"<div class=""wp-block-columns has-3-columns"">
<div class=""wp-block-column"">
<p class=""left"">aucun...</p><div id=""question1""></div>
<p class=""left"">purge...</p><div id=""question2""></div>
<p class=""left"">fripé...</p><div id=""question3""></div>
<p class=""left"">saxes...</p><div id=""question4""></div>
</div>
<div class=""wp-block-column"">
<p class=""left"">torde...</p><div id=""question5""></div>
<p class=""left"">mufle...</p><div id=""question6""></div>
<p class=""left"">oraux...</p><div id=""question7""></div>
<p class=""left"">dégel...</p><div id=""question8""></div>
</div>
<div class=""wp-block-column"">
<p class=""left"">dépôt...</p><div id=""question9""></div>
<p class=""left"">herbe...</p><div id=""question10""></div>
<p class=""left"">anaux...</p><div id=""question11""></div>
<p class=""left"">eûtes...</p><div id=""question12""></div>
</div>
</div>
<h3 class=""aligncenter"">aucun ?</h3>"

Then after, I call 5 possibles numbers out of the 12 of the question.
Did you have a look to tipsforcrew.com ? when you will see it, it will be easier to understand.
note: questions and answer are not random yet as do to my tests, it is easier to always have the same base ;-)
 
When you say
...but as soon as I put it on line in my case, it is not working.
Do you mean you put it into "tipsforcrew.com"?
That just might be the problem. Why not get a free site and post your code just like you want to do for real and see if you're still having problems?
If you are you can post a link to the site and we can troubleshoot from there.
 
When you say

Do you mean you put it into "tipsforcrew.com"?
That just might be the problem. Why not get a free site and post your code just like you want to do for real and see if you're still having problems?
If you are you can post a link to the site and we can troubleshoot from there.
:thinking: yes, I would like to use it as it is on tipsfrocrew.com :blush:

If I put the code on a page, no problem, it is working. But I'm using a plugin to run a quizz (learndash). Technically you should be able to see it on the main page.
 
There are a lot of external sheets called.
Here is one BIG problem on that site - all <p> have it:
<p class=""left"">torde...</p><div id=""question5""></div>

Notice the doubled double-quotes - class=""left"" which means the 'class' will see nothing for it's name and not 'left'.
 
It looks the OP has intentionally doubled all the double quotes because entire blocks of HTML were put inside double quotes :

Code:
"<div class=""wp-block-columns has-3-columns"">
<div class=""wp-block-column"">
<p class=""left"">aucun...</p><div id=""question1""></div>
. . .
</div>
<h3 class=""aligncenter"">aucun ?</h3>"
Impossible to see any logic here, as only bits and pieces of code are being posted.
 
What is it you do not understand ? Is is a language thing ? If you just look at that HTML code you last posted, you really have no idea what is wrong about it ?
 
Back
Top Bottom