So I am trying to create a webpage that has a workout tracker on it. It starts with two weeks of input boxes that the user can put their exercise in. I want to make it to where if the user wanted to add a week, they could do so with just pressing the button. I have created this tracker in a form.
I have gotten the div to output but it doesn't output below the other input boxes, it instead outputs to a different page and I have to reload the page to get back to the tracker.
Here is the script that I have made so far:
<script>
var btn = document.getElementById("add")
function plusOne(){
var addWeek = document.getElementsByClassName("things");
// This loop prints out the entire week
for(var another of addWeek){
document.write(another.innerHTML);
}
}
// This adds and event listener which when you press the button, it
// actives the plusOne function.
btn.addEventListener("click", plusOne);
</script>`
To be honest with you, this is really above my weight class. I just started classes for web development during this spring. I have tried looking up the more advanced stuff but I don't understand it well enough to modify it for my needs. I have tried chatGPT and the code it gives for some reason is not working.
Here is the website link so that you can see the issue in action: https://belrossita.github.io/FrontEndDevAttempt2/
I only have the Training tracker worked on so far and very little styling. Thank you for you help.
This is one of the codes that chatGPT gave me that didn't work
var addButton = document.ElementById("add");
addButton.addEventListener("click", addAWeek);
function addAWeek() {
var newWeek = document.createElement("section");
newWeek.innerHTML = "
<hr>
<h2>New Week</h2>
<div class="daystraining">
<label for="days"> </label>
<label for="sunday">Sunday</label>
<label for="monday">Monday</label>
<label for="tuesday">Tuesday</label>
<label for="wednesday">Wednesday</label>
<label for="thursday">Thursday</label>
<label for="friday">Friday</label>
<label for="saturday">Saturday</label>
</div>
<div class="exercise2">
<label for="rowOne">Enter Exercise Here:</label>
<input type="text" name="postweekend" id="postweekend" >
<input type="text" name="weekdayone" id="weekdayone" >
<input type="text" name="weekdaytwo" id="weekdaytwo">
<input type="text" name="weekdaythree" id="weekdaythree">
<input type="text" name="humpday" id="humpday">
<input type="text" name="preweekend" id="preweekend">
<input type="text" name="weekend" id="weekend">
</div>
<div class="weight2">
<label for="rowTwo">Enter Weight Here:</label>
<input type="text" name="postweekend" id="postweekend" >
<input type="text" name="weekdayone" id="weekdayone">
<input type="text" name="weekdaytwo" id="weekdaytwo">
<input type="text" name="weekdaythree" id="weekdaythree">
<input type="text" name="humpday" id="humpday">
<input type="text" name="preweekend" id="preweekend">
<input type="text" name="weekend" id="weekend">
</div>
<div id="closeToEnd">
<div class="reps2">
<label for="rowThree">Enter Reps Here:</label>
<input type="text" name="postweekend" id="postweekend" >
<input type="text" name="weekdayone" id="weekdayone">
<input type="text" name="weekdaytwo" id="weekdaytwo">
<input type="text" name="weekdaythree" id="weekdaythree">
<input type="text" name="humpday" id="humpday">
<input type="text" name="preweekend" id="preweekend">
<input type="text" name="weekend" id="weekend">
</div>
</div>
<div id="lastRow">
<div class="sets2">
<label for="rowFour">Enter Sets Here:</label>
<input type="text" name="postweekend" id="postweekend" >
<input type="text" name="weekdayone" id="weekdayone">
<input type="text" name="weekdaytwo" id="weekdaytwo">
<input type="text" name="weekdaythree" id="weekdaythree">
<input type="text" name="humpday" id="humpday">
<input type="text" name="preweekend" id="preweekend">
<input type="text" name="weekend" id="weekend">
</div>
</div>";
var outputDiv = document.getElementById("output");
outputDiv.appendChild(newWeek);
}
