absolutenewbie
New Coder
Hey,
I'm trying to buld a decision tree with multiple nodes. Selecting each node is supposed to lead to specific content being displayed. Imagine a game of chess where two players sit across each other. Clicking on the first player is suppposed to display his opening move, clicking on the second player is supposed to display the 2nd players answer. Basically, I'd want for each click on the specific player to make the game advance one move.
This is how far I've come with my code.
[CODE title="Game with 2 players"]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<style>
.myimgdivtoggle1 {
display: none;
}
.myimgdivtoggle2 {
display: none;
}
</style>
<script>
$(document).ready(function(){
$('.togglebtn1').click(function(){
$('.myimgdivtoggle1').toggle();
});
});
$(document).ready(function(){
$('.togglebtn2').click(function(){
$('.myimgdivtoggle2').toggle();
});
});
</script>
</head>
<body>
<ul>
<li><a class="active" href="index.html">Main</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:cadetblue;height:1500px;">
<h1><center>TEST</center></h1>
</div>
<div class="table">
<button type="button" class="togglebtn1" id="uno">1</button>
<div class="myimgdivtoggle1">
<img src="1.JPG" class="imgrange1"/>
</div>
<button type="button" class="togglebtn2" id="duo">2</button>
<div class="myimgdivtoggle2">
<img src="2.JPG" class="imgrange1"/>
</div>
</body>
</html>[/CODE]
Unfortunately, it isn't quite optimal as what I'm basically doing after each move is placing a picture over the picture that was there before. While this "works" in a Frankenstein kind of way, it doesn't really fulfill the purpose.
Ideally, advancing in the decision tree would "erase" the moves that have appeared before.
I guess my toggle command is not the right one for my purpose. How else should I approach this matter?
I think what I'm looking to do is chaining events in that sense that if I click "1" and then click "2" I want other information to appear compared to if I clicked "2" right away. Does that make sense?
I'm trying to buld a decision tree with multiple nodes. Selecting each node is supposed to lead to specific content being displayed. Imagine a game of chess where two players sit across each other. Clicking on the first player is suppposed to display his opening move, clicking on the second player is supposed to display the 2nd players answer. Basically, I'd want for each click on the specific player to make the game advance one move.
This is how far I've come with my code.
[CODE title="Game with 2 players"]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<style>
.myimgdivtoggle1 {
display: none;
}
.myimgdivtoggle2 {
display: none;
}
</style>
<script>
$(document).ready(function(){
$('.togglebtn1').click(function(){
$('.myimgdivtoggle1').toggle();
});
});
$(document).ready(function(){
$('.togglebtn2').click(function(){
$('.myimgdivtoggle2').toggle();
});
});
</script>
</head>
<body>
<ul>
<li><a class="active" href="index.html">Main</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:cadetblue;height:1500px;">
<h1><center>TEST</center></h1>
</div>
<div class="table">
<button type="button" class="togglebtn1" id="uno">1</button>
<div class="myimgdivtoggle1">
<img src="1.JPG" class="imgrange1"/>
</div>
<button type="button" class="togglebtn2" id="duo">2</button>
<div class="myimgdivtoggle2">
<img src="2.JPG" class="imgrange1"/>
</div>
</body>
</html>[/CODE]
Unfortunately, it isn't quite optimal as what I'm basically doing after each move is placing a picture over the picture that was there before. While this "works" in a Frankenstein kind of way, it doesn't really fulfill the purpose.
Ideally, advancing in the decision tree would "erase" the moves that have appeared before.
I guess my toggle command is not the right one for my purpose. How else should I approach this matter?
I think what I'm looking to do is chaining events in that sense that if I click "1" and then click "2" I want other information to appear compared to if I clicked "2" right away. Does that make sense?
Attachments
Last edited:
