JavaScript Call several times a javascript on the same page

[abonne-toiture]

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:

<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:

<p id="rep1"></p><p id="rep4"></p><p id="rep6"></p><p id="rep2"></p><p id="rep12"></p>

My script:

<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 ?

 

[Deleted member 2829]

I have no clue what you mean with MCQ and why that is relevant.
But you should first of all run your HTML code through the W3C Online Validator and fix all the errors. That might just fix your problem, too.
As to your last question, again no idea what "my MCQ" is, but any scripting that uses elements from the page (as yours does) should be at the end of the page. If it's not, these elements might not be defined yet.
One advice: do not write things like "is not working". Explain what it does (or doesn't) compared to what you were expecting. And by all means, always check the Console messages in your debugger for errors.

 

[OldMan]

This does work! My question is "Why so many <script></script> tags?", this could have been done in just one set. And You could have saved typing and done this in a loop.

FYI MCQ is Multiple Choice Questions. You know where you use the IBM system to answer the ones you don't know.

 

[abonne-toiture]

Hey thanks, for the answer.
Well yes it is working even if the way I did it is not the best. My problem is than the first question is working fine but the second one is not. I guess it is because the way questions are loaded, they all load in the same time on the same page and my script can't be called twice.




basically if I put 10 times <div id="question1"></div> only the first call will work but I would like it to work 10 times and I would like it to be different.

Many thanks for your times

 

[Deleted member 2829]

As I wrote, use the validator. Observe your errors and correct them. You cannot have multiple elements with the same id. Ẇell you can, but then only the first one will ever be found. An id is supposed to be unique ! I think this is the reason that of your "only the first call works" problem.

Apart from that, I agree with @OldMan. That redundant copy/pasted script code is horrible, hard to maintain and wasteful. Think about writing a function and calling that in a loop.

Also note that if you have an element with some unique id, you can use that id as a variable name. For example, instead of
document.getElementById("question7")
you can simply use
question7 Surprisingly few people seem to know that 💡

EDIT - I now see you are not actually using that duplicated id left. So maybe this is not the cause of your problem. Follow my other tip : check the Console output in your debugger.

 

[abonne-toiture]

Hey, thanks again for your message. I got this is why it is not working, but I'm looking for the solution because it may existe and I can't write a script of 200 page to cover every call ;-)

Thanks for the tips, I will try to call is question7 only and get back to you.

Hope to read you soon.

 

[abonne-toiture]

Sorry but I just spent 2 h trying to do a loop, for, while etc etc, I have no clue how to white it and where to put my "I"..

 

[Deleted member 2829]

What exactly is your problem in creating a loop ? Have you tried out a tutorial like this one JavaScript For Loop ?​

 

[abonne-toiture]

What exactly is your problem in creating a loop ? Have you tried out a tutorial like this one JavaScript For Loop ?​

<!DOCTYPE html>
<html>
<body>

<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>

<p id="rep1"></p><p id="rep4"></p><p id="rep6"></p><p id="rep2"></p><p id="rep12"></p>

<script>

for (let i = 0; i < 12; i++) {
        let name[i] = document.getElementById("question[i]").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg[i] = document.getElementById('rep[i]');
        msg1.innerHTML = name[i];
}

</script>

</body>
</html>

My problem is I have no clue how to do it. I read this article already, this one and all the others. I don't know where and how to put this "i"

 

[Deleted member 2829]

        let name[i] = document.getElementById("question[i]").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg[i] = document.getElementById('rep[i]');

Do you realize what the error is in above code ? Did you follow my advice to check the Console log ?

 

[abonne-toiture]

        let name[i] = document.getElementById("question[i]").innerHTML = Math.floor(Math.random() * 10000)+1000;
        let msg[i] = document.getElementById('rep[i]');

Do you realize what the error is in above code ? Did you follow my advice to check the Console log ?

Sorry, but no I don't understand, I used the tools you sent me but it is not helping..;
here is a slampe for what I'm trying to do: tipsforcrew

 

[Deleted member 2829]

So, did you look at the error messages in the Console ? Did they not tell you anything at all ?

 

[abonne-toiture]

So, did you look at the error messages in the Console ? Did they not tell you anything at all ?

Of course, I have many, but I don't understand what to do ..........

1. Error: Element p not allowed as child of element label in this context. (Suppressing further errors from this subtree.)
   From line 851, column 44; to line 851, column 56
   alue="1"> <p id="rep8"></p>
   Contexts in which element p may be used:Where flow content is expected.Content model for element label:Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.
2. Error: No p element in scope but a p end tag seen.
   From line 835, column 1; to line 835, column 4
   2"></div>↩</p>↩</div
3. Error: Duplicate ID left.
   From line 941, column 1; to line 941, column 13
   -column">↩<p id="left">agile&
4. • Warning: The type attribute is unnecessary for JavaScript resources.
     From line 1189, column 8; to line 1189, column 38
     >↩↩</div> <script type="text/javascript">↩

Nothing about my javascript, which is the problem...

I'm sorry, telling me to check something I don't understand, is not helping. I spent hour on the google to check and test how I could do but so far it didn't work. If you know how to do it, I would appreciate your help, I could read and learn how you write your code.

Thanks for your time ;-)

 

[Deleted member 2829]

Those are not Console messages but the errors/warnings from the HTML Validator. Here's some hints.
1. A paragraph cannot be embedded inside a label. I think it makes sense.
2. A paragraph typically has the format <p> . . . </p>. You cannot have a </p> without a preceding <p>
3. An id is supposed to be unique.
4. This is really just a pedantic warning. Either ignore it or take out the type="text/javascript"

For the Console messages, start your web page, press F12, click on the Console tab. Examine the messages and tell us what they may suggest to you. Make an effort, please.

 

[OldMan]

OP, I hope you get emails for posting in this thread. In the following I didn't know how to do "alsoArray" any other way, there is no rhyme or reason to what you selected. I don't have a wordpress account so can't guarantee the 3 columns. I did not change the div inside the <p>.

<!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"> -->
<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>
<h3 class="aligncenter">aucun ?</h3>

<p id ="rep1"></p>
<p id ="rep4"></p>
<p id ="rep6"></p>
<p id ="rep2"></p>
<p id ="rep12"></p>

<script>
const myArray = document.getElementsByClassName('left');
const alsoArray = [1, 4, 6, 2, 12];
for (let i = 1; i < myArray.length+1; i++) {
    let name1 = document.getElementById("question"+ i);
    name1.innerHTML = Math.floor(Math.random() * 10000)+1000;
    let msg1 = document.getElementById("rep" + i);
    if(alsoArray.includes(i))  msg1.innerHTML = name1.innerHTML;
}
</script>
</body>
</html>

 

[abonne-toiture]

Hey.
How are you ? Thanks Old man for your feedback and your time.

So a friend made this java but, there is still something wrong.

First of all, all ID are now unique, so it goes from question1 to questions1250 and same things for the answer (rep1 to 1250)

questions looks like this ( answers have the the scheme but I write it as rep1, rep2, rep3 etc etc up to 1872:

<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>

<div class="wp-block-columns has-3-columns">
<div class="wp-block-column">
<p class="left">aucun...</p><div id="question13"></div>
<p class="left">purge...</p><div id="question14"></div>
<p class="left">fripé...</p><div id="question15"></div>
<p class="left">saxes...</p><div id="question16"></div>
</div>
<div class="wp-block-column">
<p class="left">torde...</p><div id="question17"></div>
<p class="left">mufle...</p><div id="question18"></div>
<p class="left">oraux...</p><div id="question19"></div>
<p class="left">dégel...</p><div id="question20"></div>
</div>
<div class="wp-block-column">
<p class="left">dépôt...</p><div id="question21"></div>
<p class="left">herbe...</p><div id="question22"></div>
<p class="left">anaux...</p><div id="question23"></div>
<p class="left">eûtes...</p><div id="question24"></div>
</div>
</div>
<h3 class="aligncenter">purge ?</h3>

<div class="wp-block-columns has-3-columns">
<div class="wp-block-column">
<p class="left">aucun...</p><div id="question25"></div>
<p class="left">purge...</p><div id="question26"></div>
<p class="left">fripé...</p><div id="question27"></div>
<p class="left">saxes...</p><div id="question28"></div>
</div>
<div class="wp-block-column">
<p class="left">torde...</p><div id="question29"></div>
<p class="left">mufle...</p><div id="question30"></div>
<p class="left">oraux...</p><div id="question31"></div>
<p class="left">dégel...</p><div id="question32"></div>
</div>
<div class="wp-block-column">
<p class="left">dépôt...</p><div id="question33"></div>
<p class="left">herbe...</p><div id="question34"></div>
<p class="left">anaux...</p><div id="question35"></div>
<p class="left">eûtes...</p><div id="question36"></div>
</div>
</div>
<h3 class="aligncenter">fripé ?</h3>

Java is now:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
const questions = document.getElementsByClassName('left');
for (let i = 1; i <= 12; i++) {
    let sum = i*12;
    let name1 = document.getElementById("question"+ i);
    let name2 = document.getElementById("question"+ sum);
    name1.innerHTML = Math.floor(Math.random() * 10000)+1000;
    let msg1 = document.getElementById("rep" + i);
    name2.innerHTML = name1.innerHTML;
    msg1.innerHTML = name1.innerHTML;
}
});
</script>

I'm not sure to understand the things with "sum"

Still not working but, I'm sure we are getting close

 

[OldMan]

It is not "java", it is "javascript". They are two different languages.
What was wrong with the code I gave you?
Just have your friend modify the code I gave you.

 

[abonne-toiture]

It is not "java", it is "javascript". They are two different languages.
What was wrong with the code I gave you?
Just have your friend modify the code I gave you.

Hey.
well noted for "java" I will check the difference ;-)

So my problem is than all questions/ answers are not displayed.

tipsforcrew

www.tipsforcrew.com

you can have a look here if you want.

Edit: True, I sent my friend, the thing you did, and he can of update it. The problem was than it was valid only for 1 question. I have a database of 100 questions and I only use 45 of them by quiz.

Thanks again for your help ;-)

 

[OldMan]

You had this in your HTML in your original post

<h3 class="aligncenter">aucun ?</h3>

<p id ="rep1"></p>
<p id ="rep4"></p>
<p id ="rep6"></p>
<p id ="rep2"></p>
<p id ="rep12"></p>

So that is what I programmed for and I said this in my post

In the following I didn't know how to do "alsoArray" any other way, there is no rhyme or reason to what you selected.

And that was in regards to this

const alsoArray = [1, 4, 6, 2, 12];

If you want to show the results for all 'rep' items modify the code like this:

<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>

If you need more help please do not go to your friend, come here.

 

[abonne-toiture]

Hey, thanks again for your time.
Yes sorry about my first message, that was not clear.

More we go less I understand the javascript :/ how ever, in your code you mention an id named answers, should I change my html somewhere and add this ID ?

I update the javascript here tipsforcrew.com and the only number I have is the first one :-/
I tried to change answer by rep without success.

Thanks