由于未编辑指定的段落 ID，Javascript 函数无法正常运行

Question

我无法让这个 javascript 函数正常运行，我不知道如何描述这个问题。总而言之，单击按钮应该显示两个 javascript 对象的文本。

有 2 个函数应该能够访问的全局对象，但是函数没有激活或者函数没有正确执行。

对我做错了什么有什么想法吗？

var property1 = new property("Commercial", "£150k");
var property2 = new property("Residential", "£300k");
// global variables

function PropertyFunction(type, value) {
  this.type = type;
  this.value = value;

  document.getElementById("js-objects").innerHTML = "Property 1 is a " + property1.type + " property with a value of " + property1.value + "<br>Property 2 is a " + property2.type + "property with a value of " + property2.value + "<br><br>The two properties are the buildings (also called properties) and the methods are displaying the property type and property value.";
}

@charset "UTF-8";

/* CSS Document */

body {
  height: 1000px;
  width: 100%;
  background: #fff;
  margin: 0;
}

#javascript-essentials {
  width: 100%;
  height: auto;
  margin: 10px;
  padding: 10px;
  background: #eff2f7;
}

#javascript-programming-techniques {
  width: 100%;
  height: auto;
  margin: 10px;
  padding: 10px;
  background: #F0F9FC;
}

.divider {
  width: 100%;
  height: auto;
  background: #CCC;
  display: block;
  margin: 10px;
}

h1 {
  font-size: 25px;
  display: block;
  width: 100%;
  height: auto;
  margin: 10px;
  text-decoration: underline;
}

h2 {
  font-size: 20px;
  display: block;
  width: 100%;
  height: auto;
  margin: 10px;
  text-decoration: underline;
}

h3 {
  font-size: 16px;
  display: block;
}

#js-objects {}

<!-- Checklist: Creating Javascript Objects -->
<!-- Checklist: Add Properties to Objects -->
<!-- Checklist: Add Methods to Objects -->
<!-- Checklist: Create Object Instances -->
<article class="divider">
  <h3>Javascript Objects</h3>
  <p>Clicking the button should display text of two javascript objects.</p>
  <p id="js-objects"></p>
  <p>NOT WORKING!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
  <button onclick="PropertyFunction()">Click Me</button>
</article>

Answer 1

您缺少 property 函数的定义，看起来您将其构造函数代码放入了 PropertyFunction。

function property(type, value) {
  this.type = type;
  this.value = value;
}

var property1 = new property("Commercial", "£150k");
var property2 = new property("Residential", "£300k");
// global variables

function PropertyFunction() {
  document.getElementById("js-objects").innerHTML = "Property 1 is a " + property1.type + " property with a value of " + property1.value + "<br>Property 2 is a " + property2.type + "property with a value of " + property2.value + "<br><br>The two properties are the buildings (also called properties) and the methods are displaying the property type and property value.";
}

@charset "UTF-8";

/* CSS Document */

body {
  height: 1000px;
  width: 100%;
  background: #fff;
  margin: 0;
}

#javascript-essentials {
  width: 100%;
  height: auto;
  margin: 10px;
  padding: 10px;
  background: #eff2f7;
}

#javascript-programming-techniques {
  width: 100%;
  height: auto;
  margin: 10px;
  padding: 10px;
  background: #F0F9FC;
}

.divider {
  width: 100%;
  height: auto;
  background: #CCC;
  display: block;
  margin: 10px;
}

h1 {
  font-size: 25px;
  display: block;
  width: 100%;
  height: auto;
  margin: 10px;
  text-decoration: underline;
}

h2 {
  font-size: 20px;
  display: block;
  width: 100%;
  height: auto;
  margin: 10px;
  text-decoration: underline;
}

h3 {
  font-size: 16px;
  display: block;
}

#js-objects {}

<!-- Checklist: Creating Javascript Objects -->
<!-- Checklist: Add Properties to Objects -->
<!-- Checklist: Add Methods to Objects -->
<!-- Checklist: Create Object Instances -->
<article class="divider">
  <h3>Javascript Objects</h3>
  <p>Clicking the button should display text of two javascript objects.</p>
  <p id="js-objects"></p>
  <p>NOT WORKING!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
  <button onclick="PropertyFunction()">Click Me</button>
</article>