在 Index.HTML 文件中调用的 Javascript 对象

Question

所以，我创建了一个 HTML 文件，其中包含带有以下标签的按钮：名字、姓氏等 我需要对按钮进行编程，以便当用户单击它时，拳头名称按钮应该消失，而在 <div> 中，您会看到名称“John Doe”

我在我的 .js 文件中创建了这个：

// 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;
    };

使用 jQuery 和上面的对象，在单击相应按钮时显示信息。

如何在 HTML 文件中调用它，以便每个函数在屏幕上返回相应的数据？

我在 HTML 文件中的调用行：

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

Answer 1

您可以替换或隐藏/显示一些 dom 元素。我会选择后者。我还将把giveFirstName 方法变成showValue 方法，这样它就更灵活了。

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>

Answer 2

您需要调用该函数，并且您需要添加将按钮替换为返回值的代码。

在下面的代码中，我将<a> 更改为<div>，因为锚点内不能有按钮，单击锚点会尝试跟随链接。

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>