With the submit button, you should have the JavaScript hide that button when the page is starting to load.
Hide the submit button
Here’s the existing calculate and submit buttons:
<button id="calculate">Display my CV</button>
<button id="submit">Submit for evaluation</button>
The submit button needs to be hidden when the page first loads:
so let’s add some CSS to let us hide things:
.hide {
display: none;
}
and some JavaScript to hide the button:
const submitButton = document.querySelector("#submit");
submitButton.classList.add("hide");
Show the submit button
After that Display my CV button has been clicked, that’s when the Submit button can then be shown.
const calculateCVButton = document.querySelector("#calculate");
...
function calculateCVHandler(evt) {
calculateCV();
submitButton.classList.add("hide");
}
...
calculateCVButton.addEventListener("click", calculateCVHandler);
Here’s what that all looks like together. We have three parts:
- References to on-page elements
- Functions and event handlers
- Things that happen when the page initializes
// Variables
const calculateCVButton = document.querySelector("#calculate");
const submitButton = document.querySelector("#submit");
// Functions
function calculateCV(calculateButton) {
// yet to be implemented
}
// Event Handlers
function calculateCVHandler(evt) {
calculateCV(event.target);
submitButton.classList.add("hide");
}
// Init
calculateCVButton.addEventListener("click", calculateCVHandler);
submitButton.classList.add("hide");
Clicking the Display button, lets certain things be checked in the calculateCV function, and results in the submit button being shown.
Use the submit button
Lastly, something wants to be done when you press the submit button.
function submitCV(submitButton) {
// yet to be implemented
}
...
function submitCVHandler(event) {
submitCVHandler(event.target);
}
...
submitButton.addEventListener("click", submitCVHandler);
Here’s what that looks like in total:
// Variables
const calculateCVButton = document.querySelector("#calculate");
const submitButton = document.querySelector("#submit");
// Functions
function calculateCV(calculateButton) {
// yet to be implemented
}
function submitCV(submitButton) {
// yet to be implemented
}
// Event Handlers
function calculateCVHandler(event) {
calculateCV(event.target);
submitButton.classList.remove("hide");
}
function submitCVHandler(event) {
submitCVHandler(event.target);
}
// Init
calculateCVButton.addEventListener("click", calculateCVHandler);
submitButton.addEventListener("click", calculateCVHandler);
submitButton.classList.add("hide");
That’s the main structure of the calculate and submit code, and you now have a good place to carry on working with things in those functions that are yet to be implemented.
