Question

在初始追加之后如何填充DOM元素的内容？下面显示的大多数代码是DOM创建。跨度段是我的四个可点击元素。一旦单击，它们都将调用相同的函数。该按钮调用一个单独的函数，该函数用于重新加载屏幕，但显示来自JSON的下一组问题。

   i=0;
function myFunction(){
    //console.log('hello')
    div1=document.createElement("div");
    div1.setAttribute("class","container");
// console.log(div1)
    // for(var i=0;i<content.length;i++){
        div2=document.createElement("div");
        div2.setAttribute("class","question-card");
        div1.appendChild(div2);
 // console.log(div2)       
        h11=document.createElement("h1");
        h11.setAttribute("id","question1");
        h11.innerHTML=content[i].question;
        div2.appendChild(h11);
// console.log(h11)
        div3=document.createElement("div");
        div3.setAttribute("class","answer-choices");
        div1.appendChild(div3);
// console.log(div3)
        div4=document.createElement("div");
        div4.setAttribute("class","row1");
        div3.appendChild(div4);
// console.log(div4)
        span1=document.createElement("span");
        span1.setAttribute("class","choice1");
        span1.setAttribute("id","one");
        document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'one'){//do something}
        unlocknext();


 }});
        //span1.setAttribute("onclick","choice1()");
        span1.innerHTML=content[i].options[0];
        div4.appendChild(span1);

// console.log(span5)
        button1=document.createElement("button");
        button1.setAttribute("id","btn");
        button1.setAttribute("disabled",true);
        document.addEventListener('click',function(e){
    if(e.target && e.target.id=='btn'){//do something}
        nextScreen();    
 }});
        button1.innerHTML="Next";
        div1.appendChild(button1);
    //}
// console.log(button1) 
document.body.appendChild(div1);
}
function unlocknext(){
    document.getElementById('btn').removeAttribute("disabled");
    document.getElementById('question1').innerHTML="Answer recorded, click next.";
    console.log('Unlock next')
    console.log(div1)
}

function nextScreen(){
    console.log(i);
    i++;    
    myFunction();
    console.log("NextscreenUpload")
}

我的JS

<!DOCTYPE html>
<html>
<head>
    <title>Quiz game</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

</body>
<script src="json/qubank.json"></script>
<script src="js/dynamicindex.js"></script>
</html>

我的HTML

body{
    background-color: #642ca3;
    font-family: Roboto;
}
.container{
text-align: center;
position:absolute;
width: 100%;
left: 50%;
background-color: green;
top: 40%;
transform: translate(-50%, -50%);
}
.question-card{
    background-color: yellow;
}
.answer-choices{
    background-color: 
}
.choice1{
    background-color: #f75c4f;
}
.choice1:hover{
    background-color: #f52f1e;
}
.choice2{
    background-color: #f23def;
}
.choice2:hover{
    background-color: #ec10e9;
}

.choice3{
    background-color: #02b6ee;
}
.choice3:hover{
    background-color: #028fbb;
}
.choice4{
    background-color: #f2ba2c;
}
.choice4:hover{
    background-color: #dda30e;
}
.row1{
    margin: 50px;
    padding: 30px;
}
.row2{
    margin: 50px;
    padding: 30px;
}
span{
    padding: 2%;
    margin: 10%;
    cursor: pointer;
}
button{
    padding: 10px;
    border-radius: 15px;

}

我的CSS

DOM追加属性导致错误

0 个答案: