Какие доработки можно внести в код

Question

Есть код, который написан дилетантскими пальцами. Помогите исправить ошибки, если они есть (не сомневаюсь в этом).

JavaScript

let cars = [
['SSC Tautara', '260', 'Зелёный', '6'],
['Lada Calina', '245', 'Красный', '4'],
['Honda Stream', '250', 'Синий', '5'],
['Lambargini', '260', 'Красный', '5'],
['BMW x6', '250', 'Синий', '6'],
['Honda Fit', '245', 'Синий', '6'],
['Toyota Corolla','250', 'Красный', '4'],
['Ford Focus', '250', 'Зелёный', '6'],
['Volkswagen Golf', '245', 'Синий', '5'],
['Kia Rio', '250', 'Зелёный', '4'],
]

let oneMatchArr = [];
let twoMatchesArr = [];
let threeMatchesArr = [];

let labeles = document.querySelectorAll('label')

labeles.forEach(function(lbl) {
    lbl.addEventListener('click', function() {
        
        let active = this.parentNode.querySelector('.helo.active')
        if (active) {active.classList.remove('active')}
        lbl.classList.add('active')
    })
}) 
let abc = 209
let butAccept = document.querySelector('#butAccept')
butAccept.addEventListener('click', function() {


    let answers = document.querySelectorAll('.active');
    // console.log(answers)
    let questions = document.querySelectorAll('p');
    if (answers.length < questions.length) {
        console.log('Э ептыть')
        return;
    }
    let ansArray = [answers[0].textContent, answers[1].textContent, answers[2].textContent]
    console.log(ansArray)
let q = 0;
let matches = 0;
for (let i = 0; i < cars.length; q++) {
    if (ansArray[q] == cars[i][q+1]) {
        matches++
        matches1(cars[i][0], matches)}
    if (q > 1) {
        i++
        q = -1;
        matches = 0
        }
    
}
function matches1(car, mtchs) {
console.log(`matches ${mtchs} car (${car})`);
if (mtchs == 1) {
    oneMatchArr.push(' ' + car)
    changeValue(1, oneMatchArr)
}
if (mtchs == 2) {
    twoMatchesArr.push(' ' + car)
    changeValue(2, twoMatchesArr)
}
if (mtchs == 3) {
    threeMatchesArr.push(' ' + car)
    changeValue(3, threeMatchesArr)
}
}
})


function changeValue(matchs, holy) {
    if (matchs == 1) {
document.querySelector('.oneMatch').textContent = `Одно: ${holy}`;
}
if (matchs == 2) {
document.querySelector('.twoMatches').textContent = `Два: ${holy}`;
}
if (matchs == 3) {
document.querySelector('.threeMatches').textContent = `Три: ${holy}`;
}

}
 
let resetBut = document.querySelector('.resetBut')
resetBut.addEventListener('click', function() {
document.querySelector('.oneMatch').textContent = `Одно: `;
document.querySelector('.twoMatches').textContent = `Два: `;
document.querySelector('.threeMatches').textContent = `Три: `;
oneMatchArr = [];
twoMatchesArr = [];
threeMatchesArr = [];
})

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap" rel="stylesheet">
        <title>Zola</title>
        </head>
    <body>
        <div class="queBlock">
                Желаемая максимальная скорость: 
                <p>
                    <input type="radio" id="text" name="hel">
                    <label for="text" class="test helo">250</label>
                    <input type="radio" id="text1" name="hel">
                    <label  for="text1" class="test helo">245</label>
                    <input type="radio" id="text2" name="hel">
                    <label  for="text2" class="test helo">260</label>
                </p>
                Желаемый цвет:
                <p>
                    <input type="radio" id="text3" name="hel1">
                    <label  for="text3" class="test1 helo">Зелёный</label>
                    <input type="radio" id="text4" name="hel1">
                    <label for="text4" class="test1 helo">Красный</label>
                    <input type="radio" id="text5" name="hel1">
                    <label for="text5" class="test1 helo">Синий</label>
                </p>
                Желаемое количество передач:
                <p>
                    <input type="radio" id="text6" name="hel2">
                    <label  for="text6" class="test2 helo">6</label>
                    <input type="radio" id="text7" name="hel2">
                    <label for="text7" class="test2 helo">5</label>
                    <input type="radio" id="text8" name="hel2">
                    <label for="text8" class="test2 helo">4</label>
                </p>
        </div>
        <button id="butAccept">Принять</button>
        <button class="resetBut">Сбросить</button>
        <div class="outputBlock">
            <div class="oneMatch"> Одно: </div>
             <div class="twoMatches"> Два: </div>
             <div class="threeMatches"> Три: </div>
             
        </div>
        <script src="main.js"></script>
        </body>
</html>

CSS

* {
    margin: 15px 10px;
}
input {
    display: none;
}

.test::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border: 3px solid gray;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #A9A9A9;
}
.test1::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border: 3px solid gray;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #A9A9A9;
}
.test2::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border: 3px solid gray;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #A9A9A9;
}

input[name="hel"]:checked + label::before {
    background-color: rgba(0, 255, 0, 0.8);
}
input[name="hel1"]:checked + label::before {
    background-color: rgba(0, 255, 0, 0.8);
}
input[name="hel2"]:checked + label::before {
    background-color: rgba(0, 255, 0, 0.8);
}
.active {
}
.queBlock{
    float: left;
    border: 2px solid black;
    width: 50%;
}

.outputBlock {
    display: inline-block;
    height: 100%;
    width: 40%;
    left: 50%;
}

#butAccept {
    position: absolute;
    left: 40%;
}

.resetBut {
    position: absolute;
    left: 40%;
    top: 10%;
}

БЛОГ НА HUSL

Какие доработки можно внести в код

Ответы (0 шт):