Java Script Objects calling in Index.HTML file

Question

So, Im creating a HTML file which has buttons with labels like: First Name, Last name, etc I need to program the button so that when user clicks it the Fist name button should go away and in the <div> you instead see the name "John Doe"

I've created this in my .js file:

// create a JavaScript object here with the following fields: firstName, lastName, jobTitle, homeOffice

var demo = {
    firstName : "Waseem",
    lastName : "Qazi",
    jobTitle : "Traveler Care",
    homeOffice : "Penn. field",
    tellMeMore : "Exicted to re-start my coding adventure again. Been a while 
    since I had coded.  Looking forward to all the learning and growth this 
    amazing oppportunity will present."

    givefirstname : function() {
        return this.firstName;
    };

using jQuery and the object above, display the information as the appropriate button is clicked.

How do I call this in HTML file so that each function gives the corresponding data back on the screen?

my call line in HTML file:

<li>
    <a class="selected" href="">
        <button type="button" onclick=demo.givefirstname>
          First Name
        </button> 
    </a>
</li>
<br>

You say you want to put the name inside the `
`. There's no DIV in your HTML. — Barmar, Aug 14 '18 at 00:33

Barmar · Answer 1 · 2018-08-14T18:51:51.260

You need to call the function, and you need to add code that replaces the button with what it returns.

In the code below I've changed the <a> to <div>, since you can't have a button inside an anchor, and clicking on the anchor would try to follow the link.

var demo = {
  firstName: "Waseem",
  lastName: "Qazi",
  jobTitle: "Traveler Care",
  homeOffice: "Penn. field",
  tellMeMore: `Exicted to re-start my coding adventure again. Been a while 
  since I had coded.Looking forward to all the learning and growth this
  amazing oppportunity will present.`,
  givetitle: function() {
    return this.jobTitle;
  },
  givefirstname: function() {
    return this.firstName;
  },
  givelastname: function() {
    return this.lastName;
  }
};

function replaceMe(element, contents) {
  element.parentElement.innerHTML = contents;
}

<ul>
  <li>
    <div class="selected">
      <button type="button" onclick="replaceMe(this, demo.givefirstname())">
          First Name
        </button>
    </div>
  </li>
  <li>
    <div class="selected">
      <button type="button" onclick="replaceMe(this, demo.givelastname())">
          Last Name
        </button>
    </div>
  </li>
  <li>
    <div class="selected">
      <button type="button" onclick="replaceMe(this, demo.givetitle())">
          Job Title
        </button>
    </div>
  </li>
</ul>

Great! Thanx a bunch! However when I copy same code for rest of functions to call lastname, jobtitle etc the HTML file doesn't do anything. None of the button changes. Only when I use one function alone does the page work for that one button. But when I copy code for rest of buttons. None one. Hmmmm — waz416, Aug 14 '18 at 12:26
also I'm supposed to have seperate HTML and JS files so Im adding your first block of code to the JS file and the 2nd to the HTML. — waz416, Aug 14 '18 at 13:43
I've added more buttons for other fields and it works. Maybe you made a syntax error when you did it. Did you check the console for errors? — Barmar, Aug 14 '18 at 18:52

score 0 · Answer 2 · answered Aug 14 '18 at 00:42

You can either replace, or hide/show some dom elements. I'm going to go with the latter. I'm also going to make the giveFirstName method a showValue method so it's more flexible.

var demo = {
  firstName : "Waseem",
  lastName : "Qazi",
  jobTitle : "Traveler Care",
  homeOffice : "Penn. field",
  tellMeMore : "Exicted to re-start my coding adventure again. Been a while since I had coded.  Looking forward to all the learning and growth this amazing oppportunity will present.",

  showValue : function(key, el) {
    el.getElementsByTagName('span')[0].style.display = 'none';
    var paragraph = el.getElementsByTagName('span')[1];
    paragraph.style.display = 'inline';
    paragraph.innerHTML = this[key];
  },
}

p.value {
  display: none;
}

<li>
    <a class="selected" onclick="demo.showValue('firstName', this)">
        <span class="title">First Name</span>
        <span class="value"></span>
    </a>
</li>

Java Script Objects calling in Index.HTML file

2 Answers2