I’m new to Javascript and currently working on a project and would appreciate ANYONE’s help.
I have a form where I click the “Display My CV” button and the client’s results do not display.
Objectives:
I need to use Object.values method to display the array of values within those elements for both the “education” and “work” objects:
a. For the “education” object, precede the array with the phrase "Highest level of education is "
b. For the “work” object, precede the array with the phrase "Experienced in teaching "
The client selects within the Multiple Choice options:
Education: Secondary
Work: I have no teaching experience.
Below is the HTML, then afterward my Javascript Writeup.
HTML
<div id="education1">
<p>What is your highest level of education?</p>
<select id="education-level">
<option id="graduate" value="graduate">Graduate</option>
<option id="secondary" value="secondary">Secondary</option>
</select>
</div>
<div id="work-history1">
<p>
With which of the following teaching areas do you have most
experience?
</p>
<select id="areas">
<option id="teaching-primary" value="Primary education">
Primary education
</option>
<option id="teaching-none" value="no audiences">
I have no teaching experience
</option>
</select>
</div>
<button id="calculate">Display my CV</button>
My Javascript
var calculate = document.getElementById("calculate");
var education1 = document.getElementById("education1");
var workHistory = document.getElementById("work-history1");
var submitBtn = document.getElementById("submit")
calculate.addEventListener("click", function() {
var education = {
levelKey: document.getElementById("education-level").value,
mathmajorKey: document.getElementById("math-major").value,
};
var work = {
areaKey: document.getElementById("areas").value,
yearsKey: document.getElementById("years").value,
};
education1.innerHTML = "<p>Highest Level of education is college" + levelKey +
"Did not have a math major</p>";
workHistory.innerHTML = "<p>Experienced in teaching" + yearsKeys + ".</p>";
submitBtn.addEventListener("submit", function(e) {
e.preventDefault();
document.getElementById("submit").style.visibility = "visible";
submitBtn.innerHTML =
"<button id='submit' style=color:white; background:grey>CV Submitted</button>";
}
Thank you for your help! Again, I’m learning and GREATLY appreciate it
I reviewed my objects and below is the HTML and my revised Javascript text.
Thanks much!
Objects Created for the Form (Objective)
Select the “calculate” button, and create an event that will call an anonymous function when this button is clicked.
Within the scope of this function, define the “education” object with two key-value pairs:
a. “levelKey” comprises the value selected within the “education-level” element.
b. “mathmajorKey” comprises the value selected within the “mathmajor” element.
Next, define the “work” object with two key-value pairs"
a. “areaKey” comprises the value selected within the “areas” element.
“yearsKey” comprises the value selected within the “years” element.
<div id="education1">
<p>What is your highest level of education?</p>
<select id="education-level">
<option id="postgraduate" value="postgraduate">Postgraduate</option>
<option id="graduate" value="graduate">Graduate</option>
<option id="secondary" value="secondary">Secondary</option>
</select>
<p>
Was Mathematics one of your majors at your highest level of education?
</p>
<select id="mathmajor">
<option id="mathmajor-yes" value="Had math as a major">Yes</option>
<option id="mathmajor-no" value="Did not have math as a major">
No
</option>
</select>
</div>
<h3>Section 2: Work History</h3>
<div id="work-history1">
<p>
With which of the following teaching areas do you have most
experience?
</p>
<select id="areas">
<option id="teaching-primary" value="Primary education">
Primary education
</option>
<option id="teaching-secondary" value="Secondary education">
Secondary education
</option>
<option id="teaching-tertiary" value="Tertiary education">
Tertiary education
</option>
<option id="teaching-none" value="no audiences">
I have no teaching experience
</option>
</select>
<p>How many years' worth of teaching experience do you have?</p>
<select id="years">
<option id="teaching-one" value="0 to 2 years">0 to 2 years</option>
<option id="teaching-three" value="3 to 6 years">3 to 6 years</option>
<option id="teaching-seven" value="7 or more years">
7 or more years
</option>
</select>
</div>
<button id="calculate">Display my CV</button>
<button id="submit">Submit for evaluation</button>Preformatted text
My New Javascript:
var calculate = document.getElementById("calculate");
var educationLev = document.getElementById("education-level").value;
var mathmajor = document.getElementById("mathmajor").value;
var area = document.getElementById("areas").value;
var years = document.getElementById("years").value;
calculate.addEventListener("click", function() {
var education = {
levelKey: 'educationLev',
mathmajorKey: 'mathmajor',
};
var work = {
areaKey: 'area',
yearsKey: 'years',
};
});