每当我尝试在我的打字稿和javascript文件中使用style.backgroundColor = "#F18C8E"时，它永远不会起作用。即使我很确定我按照教程所说的去做。尽管我看到的许多教程都将脚本放在.html文件内的标签中，所以我不确定这是否以某种方式有所作为。但是我必须使用链接的.js或 .ts 文件来完成此任务。
使用打字稿/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");
}
你可以这样做。请注意类名前面的.：
let correct = document.querySelectorAll(".correctDiv");
Array.from(correct).forEach(i=>{
i.style.backgroundColor = "#F18C8E"
})