时间戳

首页 > 解决方案 > 单击提交后使用 typescript/javascript 更改 div 的背景颜色

javascript - 单击提交后使用 typescript/javascript 更改 div 的背景颜色

问题描述

每当我尝试在我的打字稿和 javascript 文件中使用 style.backgroundColor = "#F18C8E" 时，它永远不会起作用。即使我很确定我会按照教程所说的那样做。尽管我看到的很多教程都将脚本放在 .html 文件内的标签中，所以我不确定这是否会有所作为。但我必须使用链接的 .js 或 .ts 文件来完成此任务。

使用 typescript/javascript，单击 5 个答案并提交后，如何将 5 个“correctDiv”答案的背景颜色更改为“#F18C8E”？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="buzzfrog.css">
</head>
<body>
    <div class="container">
        <h1>BuzzFrog's Quiz Of The Day</h1>
        <!-- "Todays Topic not in mockup but need it for criteria dfsdfdsfsdfsdf-->
        <p>Today's Topic: Sports</p>
    </div>
    <form name="formContainer">

        <div class="div1">
            <h2>Who won the 2018 FIFA World Cup?</h2>
            <div class="row1">
                <div class="incorrectDiv"><h3><input type="radio" name="q1" value="0">Brazil</h3></div>
                <div class="incorrectDiv"><h3><input type="radio" name="q1" value="0">Germany</h3></div>
            </div>
            <div class="row2">
                <div class="correctDiv"><h3><input type="radio" name="q1" value="1">France</h3></div>
                <div class="incorrectDiv"><h3><input type="radio" name="q1" value="0">Spain</h3></div>
            </div>
        </div>

        <div class="div2">
            <h2>Who won the 2019 AFL Grand Final?</h2>
            <div class="row1">
                <div class="correctDiv"><h3><input type="radio" class="style" name="q2" value="1">Richmond</input></h3></div>
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q2" value="0">Greater Western Sydney</input></h3></div>
            </div>
            <div class="row2">
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q2" value="0">Geelong</input></h3></div>
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q2" value="0">Brisbane</input></h3></div>
            </div>
        </div>

        <div class="div3">
            <h2>Who won the men's 2020 Australian Open?</h2>
            <div class="row1">
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q3" value="0">Roger Federer</input></h3></div>
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q3" value="0">Dominic Thiem</input></h3></div>
            </div>
            <div class="row2">
                <div class="correctDiv"><h3><input type="radio" class="style" name="q3" value="1">Novak Djokovic</input></h3></div>
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q3" value="0">Rafael Nadal</input></h3></div>
            </div>
        </div>

        <div class="div4">
            <h2>Who won the 2019 UEFA Champions League?</h2>
            <div class="row1">
                <div class="correctDiv"><h3><input type="radio" class="style" name="q4" value="1">Liverpool</input></h3></div>
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q4" value="0">FC Barcelona</input></h3></div>
            </div>
            <div class="row2">
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q4" value="0">Real Madrid</input></h3></div>
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q4" value="0">Manchester United</input></h3></div>
            </div>
        </div>

        <div class="div5">
            <h2 class="h2small">The player to win the most FIFA World Player Of The Year awards is:</h2>
            <div class="row1">
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q5" value="0">Zinedine Zidane</input></h3></div>
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q5" value="0">Ronaldinho</input></h3></div>
            </div>
            <div class="row2">
                <div class="incorrectDiv"><h3><input type="radio" class="style" name="q5" value="0">Cristiano Ronaldo</input></h3></div>
                <div class="correctDiv"><h3><input type="radio" class="style" name="q5" value="1">Lionel Messi</input></h3></div>
            </div>
        </div>

    <div class="submitdiv">
        <button type="submit" id="submit" onclick="result()">SUBMIT</button>
    </div>
    </form>
</body>

<script type="text/javascript" src="dist/buzzfrog.js" ></script>

</html>

function result() {

    var q1 = parseInt(document.querySelector('input[name = "q1"]:checked').value);
    var q2 = parseInt(document.querySelector('input[name = "q2"]:checked').value);
    var q3 = parseInt(document.querySelector('input[name = "q3"]:checked').value);
    var q4 = parseInt(document.querySelector('input[name = "q4"]:checked').value);
    var q5 = parseInt(document.querySelector('input[name = "q5"]:checked').value);

    let correct = document.querySelectorAll("correctDiv");
    console.log(correct.length + "<<<<<<<<<<<<<<<<<<<");

    var score = q1 + q2 + q3 + q4 + q5;
    console.log(score + " out of 5");

    alert("your score is " + score + " out of 5");
}

标签： javascripttypescript

解决方案

你可以这样做。注意.类名之前的： 

 let correct = document.querySelectorAll(".correctDiv");
    Array.from(correct).forEach(i=>{
     i.style.backgroundColor = "#F18C8E"
    })

推荐阅读