Javascript returns "undefined" 当使用元素的 innerHTML 作为键时

Question

HTML

<h1 id="mojaTata"></h1>

javascript，带问题和答案的字典

pitanja_i_odgovori = {
        "Predjeni put": "S =  * t",
        "x vektora koji je dat kao A(x1;y1)" : "x1 = r1 cos(α1)" ,
        ... etc
}

将随机键设置为 h1 元素 (id=mojaTata) 中的值，这是我们的 "question"（我们 "inject" 向 h1(id=mojaTata) 提问，以便我们的用户查看随机物理问题), 这部分效果很好

for (key in pitanja_i_odgovori) {
        len += 1
}
document.getElementById('mojaTata').innerHTML = Object.keys( pitanja_i_odgovori[Math.floor(Math.random() * len) ];

这是问题所在，我想得到我们在 h1(id=mojaTata) 中的问题的答案

alert( pitanja_i_odgovori[document.getElementById('mojaTata').innerHTML] );

这个 returns "undefined"，当我 console.log(document.getElementById('mojaTata').innerHTML) 我得到输出（答案) 没问题

Answer 1

要使 Math.random 正常工作，您必须根据要应用到

的数组的长度对其进行多重播放

试试这个

<h1 id="mojaTata"></h1>
  <button id="button">subm</button>
<script>
 const pitanja_i_odgovori = {
    "Predjeni put": "S =  * t",
    "x vektora koji je dat kao A(x1;y1)" : "x1 = r1 cos(α1)" ,

}
const btn=document.getElementById('button')
btn.addEventListener('click',()=>{
const keys=Object.keys(pitanja_i_odgovori)
console.log(keys)
const randomkey =keys[Math.floor(Math.random() * keys.length) ] //for your Math.random to work you have to multiplay it by the length of the array you are applying to 


document.getElementById('mojaTata').innerHTML = randomkey
alert( pitanja_i_odgovori[document.getElementById('mojaTata').innerHTML] );
})

</script>

Answer 2

设置问题的代码有问题。提示答案的代码似乎没有问题。

document.getElementById('mojaTata').innerHTML
= Object.keys( pitanja_i_odgovori[Math.floor(Math.random() * len) ];

不会编译，因为它缺少 )，它属于 pitanja_i_odgovori 和 [Math.floor... 之间。这也意味着结束 ) 现在应该是 ].

将问题设置更改为

document.getElementById('mojaTata').innerHTML
= Object.keys( pitanja_i_odgovori)[Math.floor(Math.random() * len)]

获取正确答案的警报。

虽然有多种实现问答呈现的方法，但请考虑使用 header 的 textContent 属性而不是 innerHTML 以防止因 <、'>' 或 '&' 中的问题文本被解释为 HTML。

测试代码：

"use strict"
// JavaScript, dictionary with questions and answers

const pitanja_i_odgovori = {
        "question 1": "answer 1",
        "question 2" : "answer 2",
        "google translate roditelj": "parent"
        // ... and more
}
/**** custom code *****/
const pitanja = Object.keys(pitanja_i_odgovori);
const len = pitanja.length;
const roditelj = document.getElementById("mojaTata");
function setPitanje(i){  
    roditelj.textContent = pitanja[i];
}
function setRandomPitanje() {
    setPitanje( Math.floor(len * Math.random()));
}
function logOdgovor() {
    // get answer (odgover) using the content of the H1 header
    console.log( pitanja_i_odgovori[ roditelj.textContent]);
}
/***** posted code with correction ****/
function postedSetMethod() {
    document.getElementById('mojaTata').innerHTML
    = Object.keys( pitanja_i_odgovori)[Math.floor(Math.random() * len)]
}
function postedAnswerMethod() {
    alert( pitanja_i_odgovori[document.getElementById('mojaTata').innerHTML] );
}

<button type="button" onclick="setRandomPitanje()">set random question</button> 
<button type="button" onclick="logOdgovor()">log answer</button> 
(custom code)<br>
<button type="button" onclick="postedSetMethod()">set random question</button>
<button type="button" onclick="postedAnswerMethod()">alert answer</button> (post code after correction)
<h1 id="mojaTata"></h1>

Javascript returns "undefined" 当使用元素的 innerHTML 作为键时

Javascipt returns "undefined" when using innerHTML of element as key

javascript

dictionary

undefined