My Display Button is Not Working

JavaScript
1

Hi Everyone!

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:

  1. 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>";
}
2

Hi @Loranne,

As I pointed out in your other thread, in future can you please use the </> button at the top of the text editor window to format your selected code.

The button will wrap your code in opening and closing backticks ``` code here ```, and make it alot to easier to read.

Thanks.

1 Like
3

ElementDoesNotExist

ElementDoesNotExist

ElementDoesNotExist

Object property should be referenced as education.levelKey

Object property should be referenced as work.yearsKey

ElementDoesNotExist

Assuming submitBtn is the button element itself, innerHTML should not contain the button tag, just the things inside it. (Hence, inner)

3 Likes
4

Oh, I didn’t know that! Thank you so much. I will certainly use </> in the text editor to make my code easier to ready.

1 Like
5

Hi Everyone!

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! :smiley:

Objects Created for the Form (Objective)

  1. Select the “calculate” button, and create an event that will call an anonymous function when this button is clicked.

  2. 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.

  1. 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',
  };
});
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.