CODEWITHSUNDEEP
javascripthtmlcss
user3760941
user3760941

Reputation: 528

Javascript function not operating correctly as not editing the paragraph id specified

I cannot get this javascript function to operate correctly and I don't know how to describe the problem. To summarise, clicking the button should display the text of the two javascript objects.

There are 2 global objects that the functions should be able to access, but the function does not activate or the function does not perform correctly.

Any ideas of what I'm doing wrong?

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>

Upvotes: 0

Views: 28

Answers (2)

CodeGodie
CodeGodie

Reputation: 12132

You're calling your function via the button <button onclick="PropertyFunction()"> but you are not passing any parameters.

This fails because your function needs two arguments: type, value

Also. I see this error on your console:

Uncaught Reference Error: property is not defined

This means that property in new property() is not defined.

To fix this write your JS in this manner:

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

function PropertyFunction() {
    var property1 = new Property("Commercial", "£150k");
    var property2 = new Property("Residential", "£300k");
    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.";
}

Upvotes: 1

Barmar
Barmar

Reputation: 780974

You're missing the definition of the property function, and it looks like you put its constructor code into 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>

Upvotes: 2

Related Questions