Как я могу оптимизировать ещё больше код? Я начинающий.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Zola</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="buttonBlock">
<p>
Если бы тебе предложили эти 3 блюда, какое бы ты выбрал? <br>
<button id="but1" class="but" onclick="tap('but1', 'but2', 'but3')">Пиццу</button>
<button id="but2" class="but" onclick="tap('but2', 'but1', 'but3')">Пельмени</button>
<button id="but3" class="but" onclick="tap('but3', 'but1', 'but2')">Курицу</button>
</p>
<p>
Какое из этих деревьев бы обнял потому, что любишь? <br>
<button id="but4" class="but" onclick="tap('but4', 'but5', 'but6')">Берёзу</button>
<button id="but5" class="but" onclick="tap('but5', 'but4', 'but6')">Ёлку</button>
<button id="but6" class="but" onclick="tap('but6', 'but4', 'but5')">Осину</button>
</p>
<p>
В какой из этих стран лучше всего жить? <br>
<button id="but7" class="but" onclick="tap('but7', 'but8', 'but9')">В России</button>
<button id="but8" class="but" onclick="tap('but8', 'but7', 'but9')">В Украине</button>
<button id="but9" class="but" onclick="tap('but9', 'but7', 'but8')">В Америке</button>
</p>
<p>
Что бы ты закричал, если бы к тебе в туалет зашёл Lololoshka? <br>
<button id="but10" class="but" onclick="tap('but10', 'but11', 'but12')">Мама</button>
<button id="but11" class="but" onclick="tap('but11', 'but10', 'but12')">Ёшкин дрын</button>
<button id="but12" class="but" onclick="tap('but12', 'but11', 'but10')">Насик жив!</button>
</p>
<p>
Какое из этих животных любишь больше всего? <br>
<button id="but13" class="but" onclick="tap('but13', 'but14', 'but15')">Коня</button>
<button id="but14" class="but" onclick="tap('but14', 'but13', 'but15')">Собаку</button>
<button id="but15" class="but" onclick="tap('but15', 'but13', 'but14')">Кошку</button>
</p>
<button class="butResult" onclick="act()" type="button" name="button">Принять</button>
</div>
<div id="output" class="outputE"> Хай мазафака </div>
<script src="worker.js">
</script>
</body>
</html>
JAVASCRIPT
let a = b = c = d = e = 'Сначала ответь на все вопросы, жопа! '
function tap(get, z, x) {
let element = document.getElementById(get);
element.classList.toggle("butAct");
element.classList.toggle("but");
let y = document.getElementById(z)
y.classList.remove("butAct")
let w = document.getElementById(x)
w.classList.remove("butAct")
if (get == 'but1' || get == 'but2' || get == 'but3') {
a = document.getElementById(get).textContent;
} else if (get == 'but4' || get == 'but5' || get == 'but6') {
b = document.getElementById(get).textContent;
} else if (get == 'but7' || get == 'but8' || get == 'but9') {
c = document.getElementById(get).textContent;
} else if (get == 'but10' || get == 'but11' || get == 'but12') {
d = document.getElementById(get).textContent;
} else if (get == 'but13' || get == 'but14' || get == 'but15') {
e = document.getElementById(get).textContent;
}
}
function act() {
co = document.getElementById('output');
console.log(a);
if (a != 'Сначала ответь на все вопросы, жопа! ' & b != 'Сначала ответь на все вопросы, жопа! ' & c != 'Сначала ответь на все вопросы, жопа! ' & e != 'Сначала ответь на все вопросы, жопа! ' & d != 'Сначала ответь на все вопросы, жопа! ') {
co.innerHTML = (`Егор ${c}, залезая на высоченную ${b}, орал \"${d}!\" и поедал ${a}, держа подмышкой ${e}`);
} else {
co.innerHTML = 'Сначала ответь на все вопросы, жопа! ';
}
}
CSS
* {
text-align: center;
font-family: 'Montserrat', sans-serif;
}
.butAct {
background-color: rgba(255, 0 , 0, 0.8);
border-radius: 7px;
color: #80E800;
font-weight: lighter;
font-kerning: auto;
}
.but:hover {
border: 10px, solid, red;
color: #B7F46E;
background-color: rgba(255, 0, 0, 0.6);
border-radius: 4px;
}
button {
font-size: 20px;
margin: 10px;
text-align: center;
background-color: rgba(191, 130, 48, 0.6);
border-radius: 5px
}
.butResult {
font-size: 30px
}
body {
background: url(https://i.pinimg.com/564x/1c/d4/d2/1cd4d2ceabd9ed87cc41f3cf8de3d3c4.jpg) no-repeat center center fixed;
background-size: cover
}
.buttonBlock {
width: 580px;
border: 2px solid black;
position: absolute;
left: 50px;
top: 60px;
}
.outputE {
width: 500px;
position: absolute;
right: 85px;
top: 60px;
border: 2px solid black;
}