0
116
ViewsButton OnClick only return works on first element
I'm new to web design. I have multiple generated lines of MySQL database elements that I want to make changes to, but when I click on button to show, it only show the first button even if I click the second or third "Add".
<body>
{% for trail in trails %}
<div>
<form>
{% csrf_token %}
TrailName:{{trail.1}}
AreaName:{{trail.2}}
City:{{trail.3}}
Length:{{trail.8}}
RouteType:{{trail.11}}
AvgRating{{trail.12}}
</form>
<button onClick="show()">Add</button>
</div>
<div class="part">
<form action="insert_schedule" method="POST">
{% csrf_token %}
<input type="radio" name="trailid" value="{{trail.0}}">
schedule date:
<input type="date" name="schedule_date">
<input type="submit" value="Ok">
</form>
<button onClick="hide()">Cancel</button>
</div>
{% endfor %}
</body>
function show() {
var show_part = document.querySelector(".part");
show_part.style.display = "block";
}
function hide() {
var show_part = document.querySelector(".part");
show_part.style.display = "none";
}
·
Juan Pablo Isaza
1 answers
Answer question0
Given the HTML structure you show:
function show(el){
const show_part = el.parentElement.nextElementSibling;
show_part.hidden = false;
}
function hide(el){
const show_part = el.parentElement;
show_part.hidden = true;
}
and change your button code to
<button type="button" onclick="show(this)">Cancel</button>
.
.
.
<button type="button" onclick="hide(this)">Cancel</button>
·
Juan Pablo Isaza
Report
Answer question