Today I made this JS code which, on a button click, should select a random message from the list and then display it. However, it just grabs one from the list (test4) and displays that specific one all the time. I can’t figure out what to do to solve the problem. When I log it to the console I get the correct html.
var r_text = new Array();
var r_pm = new Array();
let pm1 = `<p id="pname"></p>
<h3 id="pm">test1</h3>`
let pm2 = `<p id="pname"></p> <h3 id="pm">test2</h3>`;
let pm3 = `<p id="pname"></p> <h3 id="pm">test3</h3>`;
let pm4 = `<p id="pname"></p> <h3 id="pm">test4</h3>`;
let pm5 = `<p id="pname"></p> <h3 id="pm">test5</h3>`;
function nextPM() {
getPM();
getPname();
}
function getPM() {
r_pm[0] = pm1;
r_pm[1] = pm2;
r_pm[2] = pm4;
i = Math.floor(3 * Math.random())
let pm = r_pm[i]
console.log(pm)
if (pm = pm1) {
pm1text();
}
if (pm = pm2) {
pm2text();
}
if (pm = pm3) {
pm3text();
}
if (pm = pm4) {
pm3text();
}
}
function pm1text() {
document.getElementById("pmdiv").innerHTML = `${pm1}`
if (pmanswer = fix) {
goodanswer();
}
if (pmanswer = agyogyit) {
badanswer();
let hibapont = +1;
}
}
function pm2text() {
document.getElementById("pmdiv").innerHTML = `${pm2}`
if (pmanswer = agyogyit) {
goodanswer();
}
if (pmanswer = fix) {
badanswer();
let hibapont = +1;
}
}
function pm3text() {
document.getElementById("pmdiv").innerHTML = `${pm3}`
if (pmanswer = agyogyit) {
goodanswer();
}
if (pmanswer = fix) {
badanswer();
let hibapont = +1;
}
}
function pm4text() {
document.getElementById("pmdiv").innerHTML = `${pm4}`
if (pmanswer = agyogyit) {
goodanswer();
}
if (pmanswer = fix) {
badanswer();
let hibapont = +1;
}
}<div id="pmdiv"></div>
<article>
<button class="button" id="next" onclick="nextPM();">Next</button>
</article>>Solution :
The problem is with your if condition where you are not evaluating but simply assigning a value. This means your last if condition overrides the result. You need to use == instead of =
var r_text = new Array();
var r_pm = new Array();
let pm1 = `<p id="pname"></p>
<h3 id="pm">test1</h3>`
let pm2 = `<p id="pname"></p> <h3 id="pm">test2</h3>`;
let pm3 = `<p id="pname"></p> <h3 id="pm">test3</h3>`;
let pm4 = `<p id="pname"></p> <h3 id="pm">test4</h3>`;
let pm5 = `<p id="pname"></p> <h3 id="pm">test5</h3>`;
function nextPM() {
getPM();
}
function getPM() {
r_pm[0] = pm1;
r_pm[1] = pm2;
r_pm[2] = pm4;
i = Math.floor(3 * Math.random())
let pm = r_pm[i]
if (pm == pm1) {
pm1text();
}
if (pm == pm2) {
pm2text();
}
if (pm == pm3) {
pm3text();
}
if (pm == pm4) {
pm3text();
}
}
function pm1text() {
document.getElementById("pmdiv").innerHTML = `${pm1}`
}
function pm2text() {
document.getElementById("pmdiv").innerHTML = `${pm2}`
}
function pm3text() {
document.getElementById("pmdiv").innerHTML = `${pm3}`
}
function pm4text() {
document.getElementById("pmdiv").innerHTML = `${pm4}`
}<div id="pmdiv">
</div>
<article><button class="button" id="next" onclick="nextPM();">Next</button></article>