<html><head><title>Report</title>
<style> .tab {cursor: pointer; padding: 10px; display: inline-block;} </style>
</head><body>
<h1>Report</h1>
<div class="tabs">
<span class="tab" onclick="showPlot('functionPlot')">Function Plot</span>
<span class="tab" onclick="showPlot('secondDerivPlot')">Second Derivative Plot</span>
</div>
<div id="plotContainer">
<img id="functionPlot" src="val_0.png" style="display:block;">
<img id="secondDerivPlot" src="deriv_0.png" style="display:block;">
</div>
<script>
function showPlot(plotID) {
document.getElementById("functionPlot").style.display = "none";
document.getElementById("secondDerivPlot").style.display = "none";
document.getElementById(plotID).style.display = "block";
}
</script>
</body></html>
<div class="iteration-summary">
<h2>Iteration 1</h2>
<div id="plotContainer">
<img id="functionPlot" src="val_1.png" style="display:block;">
<img id="secondDerivPlot" src="deriv_1.png" style="display:none;">
</div>
</div>
In this example, I create a html page with two tabs. When I click on Function Plot, I want to see the pictures val_0.png and val_1.png. Similarly, Second Derivative Plot should depict deriv_0.png and deriv_1.png.
Function Plot shows indeed the correct pics, but Second Derivative Plot shows deriv_0.png and val_1.png. What am I doing wrong?
You need to sign in to view this answers
Leave feedback about this