Java Script对象在Index.HTML文件中调用
Java Script对象在Index.HTML文件中调用
提问于 2018-08-14 06:34:19
因此，我正在创建一个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>回答 2
Stack Overflow用户
发布于 2018-08-14 08:40:02
您需要调用该函数，并且需要添加用按钮返回的内容替换按钮的代码。
在下面的代码中，我将<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>
Stack Overflow用户
发布于 2018-08-14 08:42:14
您可以替换或隐藏/显示一些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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51831447
复制相关文章
相似问题