Question

我在更改Javascript中的单选按钮状态时遇到问题。我想将状态更改为＆quot; checked = false＆＃39;使用JS，但是当我这样做时，我的自定义单选按钮（用CSS编写，基于单选按钮的跨度和状态）会中断。另外，如果您能给我一些指导如何使我的代码更好，我将不胜感激。

link或以下的代码。

＆＃13;

window.addEventListener("load", function() {
  let question = document.getElementById("question");
  let answ = document.getElementById("ans1");
  let second_answ = document.getElementById("ans2");
  let third_answ = document.getElementById("ans3");
  let questionsArray;

  function loadJSON(callback) {
    let connection = new XMLHttpRequest();
    connection.overrideMimeType("application/json");
    connection.open("GET", "document.json", false);
    connection.onreadystatechange = function() {
      if (connection.readyState == 4 && connection.status == "200") {
        callback(connection.responseText);
      }
    };
    connection.send(null);
  }

  function nextQuestion(questionData) {
    console.log(questionData);
    question.innerText = questionData.question;
    answ.innerText = questionData.fans;
    second_answ.innerText = questionData.sans;
    third_answ.innerText = questionData.tans;
  }

  function init() {
    loadJSON(function(response) {
      let jsonFile = JSON.parse(response);

      questionsArray = jsonFile;

      let randomNumber = Math.floor(Math.random() * jsonFile.length);

      nextQuestion(jsonFile[randomNumber]);
    });
  }

  init();

  Array.from(document.getElementsByClassName("answers")).forEach(element => {
    element.addEventListener("click", () => {
      let randomNumber = Math.floor(Math.random() * questionsArray.length);

      element.checked = false;

      setTimeout(() => {
        nextQuestion(questionsArray[randomNumber]);
      }, 500);
    });
  });
});

＆＃13;

body{
    background-color: #FF881D;
}

header{
    margin-top: 4em;
    text-align: center;
}

.header-title{
    font-weight: bold;
    font-family: Helvetica;
    color: #fff;
    text-shadow: 0.05em 0.05em #333;
    font-size: 2em;
}

.header-subtitle{
    font-size: 4em;
    font-family: "Droid Sans";
    font-weight: bold;
    color: #914D11;
}

.question-box{

    background-color: #F1A418;
    padding:1em;
    margin-right: auto;
    margin-left: auto;
    margin-top: 7em;
    width: 30%;
    height: 20%;

}

#question{

    //padding-top: 1em;
    text-align: center;
    color: #914D11;
    font-size: 1.5em;
    font-family: Impact;
    font-weight: lighter;
    letter-spacing: 0.05em;
    
}

.answers-container{
    display: flex;
    flex-wrap: nowrap;
}

.answers{
    display: none;
}

.answers + label{
    color: #914D11;
    font-size: 1em;
    font-family: Impact;
}

.answers + label span{
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin: -1px 7px 0 0;
    vertical-align: middle;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 0.3em solid #ccc;
    cursor: pointer;
}

.answers:checked +label span{
     background-color: #914D11;
 }



.single{
    margin: 0 0 0.75em 2em;
    width: 33%;

}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <script src="jquery.js"></script>
    <script src="/script.js"></script>
</head>
<body>
    <div id="container">

        <header>

            <h3 class="header-title">CYRON PRESENTS</h3>
            <h1 class="header-subtitle">HTML QUIZ</h1>

        </header>

        <section>

            <div class="question-box">

                <h5 id="question">Placeholder question</h5>

                <div class="answers-container">

                <div class="single"><input type="radio" name="answers" class="answers" id="q1" value="1"><label for="q1"><span></span><a id="ans1"></a></label></div>

                    <div class="single"><input type="radio" name="answers" class="answers" id="q2" value="2"><label for="q2"><span></span><a id="ans2"></a></label></div>

                    <div class="single"> <input type="radio" name="answers" class="answers" id="q3" value="3"><label for="q3"><span></span><a id="ans3"></a></label></div>

                </div>

            </div>

        </section>

    </div>
</body>
</html>

＆＃13;

更改单选按钮的状态会破坏网站

0 个答案: