Not able to change element attrributes through js [duplicate]

تبليغ
سؤال

يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.

تبليغ
‎إلغاء

I’ve been closed twice and sent another question but it is not helpful, I checked through it and I stil can’t see what’s wrong so pls don’t close it.

I’m not exactly sure what is wrong, but I can’t seem to implement the functionalities I made in js into my HTML. The only thing from my js that affects the HTML file is my prompt, which loads the prompt with my message, but even from this I can’t seem to make the user input from it change anything, I’m not exactly sure why this is happening so help’s appreciated!

const btn1 = document.getElementsById(“1”);
const btn2 = document.getElementsById(“2”);
const btn3 = document.getElementsById(“3”);
const btn4 = document.getElementsById(“4”);
const btn5 = document.getElementsById(“5”);
const btn6 = document.getElementsById(“6”);
const btn7 = document.getElementsById(“7”);
const btn8 = document.getElementsById(“8”);
const btn9 = document.getElementsById(“9”);
const btn10 = document.getElementsById(“10”);
const btn11 = document.getElementsById(“11”);
const btn12 = document.getElementsById(“12”);
const reset = document.getElementsById(“reset”);
const pic = document.getElementById(“risco”);
const bloco = document.getElementById(“invbloco”);
const valor = 0;

function nivStress()
{
let num = prompt(“Niveis de stress: 3-6″);

if(num = 4){
bloco.className=”bloco”;
btn10.className=”butao”;
}
if(num = 5){
bloco.className=”bloco”;
btn10.className=”butao”;
btn11.className=”butao”;
}
else if(num = 6){
bloco.className=”bloco”;
btn10.className=”butao”;
btn11.className=”butao”;
btn12.className=”butao”;
}

}

reset.addEventListener(‘click’, function OnClick(){
valor = 0;
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
});

btn1.addEventListener(‘click’, function OnClick(){
btn1.style.backgroundColor = ‘red;’;
});

btn2.addEventListener(‘click’, function OnClick(){
btn2.style.backgroundColor = ‘red’;
valor += 3;
if(valor<6){
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
}
else if(valor>= 6 && valor<13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid orange”;
}
else if(valor >=13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid red”;
}
});

btn3.addEventListener(‘click’, function OnClick(){
btn3.style.backgroundColor = ‘red’;
valor +=6;
if(valor<6){
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
}
else if(valor>= 6 && valor<13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid orange”;
}
else if(valor >=13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid red”;
}
});

btn4.addEventListener(‘click’, function OnClick(){
btn4.style.backgroundColor = ‘red’;
});

btn5.addEventListener(‘click’, function OnClick(){
btn5.style.backgroundColor = ‘red’;
valor +=5;
if(valor<6){
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
}
else if(valor>= 6 && valor<13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid orange”;
}
else if(valor >=13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid red”;
}
});

btn6.addEventListener(‘click’, function OnClick(){
btn6.style.backgroundColor = ‘red’;
valor += 9;
if(valor<6){
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
}
else if(valor>= 6 && valor<13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid orange”;
}
else if(valor >=13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid red”;
}
});

btn9.addEventListener(‘click’, function OnClick(){
btn9.style.backgroundColor = ‘red’;
valor += 4;
if(valor<6){
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
}
else if(valor>= 6 && valor<13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid orange”;
}
else if(valor >=13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid red”;
}
});

btn10.addEventListener(‘click’, function OnClick(){
btn10.style.backgroundColor = ‘red’;
valor += 6;
if(valor<6){
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
}
else if(valor>= 6 && valor<13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid orange”;
}
else if(valor >=13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid red”;
}
});

btn11.addEventListener(‘click’, function OnClick(){
btn9.style.backgroundColor = ‘red’;
valor += 8;
if(valor<6){
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
}
else if(valor>= 6 && valor<13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid orange”;
}
else if(valor >=13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid red”;
}
});

btn12.addEventListener(‘click’, function OnClick(){
btn9.style.backgroundColor = ‘red’;
valor += 10;
if(valor<6){
pic.src = “risco-nulo.jpg”;
pic.border = “2px solid green”;
}
else if(valor>= 6 && valor<13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid orange”;
}
else if(valor >=13){
pic.src = “risco-moderado.jpg”;
pic.border = “2px solid red”;
}
});

<!DOCTYPE html>
<html>
<head>
<title>Risco Cardiovascular</title>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”risco.css”>
<script src=”risco.js”></script>
</head>
<body onload=”nivStress()”>
<div id=”container”>
<h1 id=”titulo”>Cálculo do Risco Cardiovascular</h1><br>
<button id=”reset” onclick=”reset()”>Reiniciar</button>
<h2 class=”parametro”>Idade</h2>
<hr class=”separador”></hl>
<div class=”block”>
<button class=”butao” id=”1″>&lt;30</button>
<button class=”butao” id=”2″>&lt;60</button>
<button class=”butao” id=”3″>&ge;60</button>
</div>
<h2 class=”parametro”>IMC</h2>
<hr class=”separador”></hl>
<div class=”block”>
<button class=”butao” id=”4″>&lt;25</button>
<button class=”butao” id=”5″>&lt;40</button>
<button class=”butao” id=”6″>&ge;40</button>
</div>
<h2 class=”parametro”>Stress</h2>
<hr class=”separador”></hl>
<div class=”block”>
<button class=”butao” id=”7″>Nível 1</button>
<button class=”butao” id=”8″>Nível 2</button>
<button class=”butao” id=”9″>Nível 3</button>
</div>
<div class=”invblock”>
<button class=”invbutao” id=”10″>Nível 4</button>
<button class=”invbutao” id=”11″>Nível 5</button>
<button class=”invbutao” id=”12″>Nível 6</button>
</div><br>
<img id=”risco” src=”risco-nulo.jpg”>
</div>
</body>
</html>

#titulo{
font-size: 20px;
color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
margin:auto;
}

#reset{
background-color: black;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 195px;
margin-right: 100px;
width: 100px;
height: 25px;
}

#container{
margin: auto;
width:fit-content;
height: fit-content;
margin-top:50px;
border: 2px solid grey;
padding: 10px;

}

.parametro{
text-align: center;
font-size: 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
}

.butao{
background-color: grey;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 150px;
height: 50px;
border:grey;
margin: 5px;;
}

#risco{
margin:auto;
border: 5px solid grey;
display:block;
}

.separador{
width: 100%;
color:grey;
}

.block{
display:inline-block;
margin: auto;
margin-bottom: 10px;
}

.invbutao{
margin: 0px;
width: 0px;
height: 0px;
visibility: hidden;
}

.invblock{
display:inline-block;
margin: 0;
visibility: hidden;
}

0
X 4 أشهر 2022-07-10T12:04:46+03:00 0 إجابة 1 مشاهدات مبتدئ 0

‫أضف إجابة

تصفح
تصفح

مجهول يجيب