I have the following code and my goal is:
- Initially I want to show only Text 1 and Button 1
- When I press button 1 with the text
Mostrar texto 2
, I hide Text 1 and button 1 and show me Text 2 and button 2 and so on.
Can you help me? Thank you!!
function muestra1(){
document.getElementById('bloque1').style.display="block";
document.getElementById('bloque2').style.display="none";
};
function muestra2(){
document.getElementById('bloque1').style.display="none";
document.getElementById('bloque2').style.display="block";
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Cambiar texto y botón</h3>
<hr>
<div class="bloque1">Texto 1
<input type="button" value="Mostrar texto 2" onclick="muestra2();">
</div>
<div class="bloque2">Texto 2
<input type="button" value="Mostrar texto 1" onclick="muestra1();">
</div>
</body>
</html>
When searching by Id, the blocks have to have the informed id. If not, you will never find it.
If you want only one to be displayed from the beginning, you can leave the property
style="display:none"
informed from the beginning in block 2Basically you are trying to get an element via su
id
but it is not declared as an attribute of your HTML tag.For the above, then it will give you an error of:
So what you should do is place it as an attribute in each of them as follows:
At the end we can leave your code as: