Retrieve form data with function constructor and prototype in Javascript

Question

I'm trying to learn function constructors and prototype methods in JavaScript, but I can't seem to quite understand them. I'm trying to retrieve the information from a form, add all the values that are written in the inputs and have a new <p> element which combines all of them into a sentence. But I can't make it work...

HTML:

<div>
 <form id="questions">
  <input type="text" id="name" ><br><br>
  <input type="text" id="date"><br><br>
  <input type="text" id="hours"><br><br>
  <input type="text" id="result"><br><br>
  <input type="submit" onclick="Sentence()">
 </form>
 <p id="example"></p>
</div>

JavaScript:

function Sentence(name, date, hours, result) {
    this.name = document.getElementById('name').value;
    this.date = document.getElementById('date').value;
    this.hours = document.getElementById('hours').value;
    this.result = document.getElementById('result').value;
};

Sentence.prototype.calcul = function () {
    var x = this.name + " a facut curatenie pe " + this.date + " timp de " + this.hours + " si a fost " + this.result;
    document.getElementById("example").innerHTML = x;
    return x;
}

Answer 1

<input type="submit" onclick="Sentence()">

To create an instance off of Function you have to use new operator on a function. Also, since the logic for combining all of the properties is in calcul method. You would need something like this:

<input type="submit" onclick="(new Sentence()).calcul()">

However, I would suggest you to use the parameters available to Sentence constructor to set properties on the sentence instance like so:

function Sentence(name, date, hours, result) {
    this.name = name;
    this.date = date;
    this.hours = hours;
    this.result = result;
};

And, your onclick event will look like:

<input type="submit" onclick="exampleSentence()">

Also, since all of this is becoming messy, I would suggest you remove the event handler from the HTML and add it to JavaScript:

function exampleSentence() {
    var exampleSentence = new Sentence(document.getElementById('name').value, document.getElementById('date').value, document.getElementById('hours').value, document.getElementById('result').value);
    
    exampleSentence.calcul();
}

And, again, since your calcul method is responsible for combining the form values into a paragraph, you should refactor the calcul method to combine the values and return the resulting sentence but, not be responsible for appending it:

Sentence.prototype.calcul = function () {
    var sentence = this.name + " a facut curatenie pe " + this.date + " timp de " + this.hours + " si a fost " + this.result;
    return sentence;
}

And, your exampleSentence method will look like:

function exampleSentence() {
    var exampleSentence = new Sentence(document.getElementById('name').value, document.getElementById('date').value, document.getElementById('hours').value, document.getElementById('result').value);
    
    document.getElementById("example").innerHTML = exampleSentence.calcul();
}

Result of all of this is:

function exampleSentence(e) {
    e.preventDefault();
    var exampleSentence = new Sentence(document.getElementById('name').value, document.getElementById('date').value, document.getElementById('hours').value, document.getElementById('result').value);
    
    document.getElementById("example").innerHTML = exampleSentence.calcul();
}

function Sentence(name, date, hours, result) {
    this.name = name;
    this.date = date;
    this.hours = hours;
    this.result = result;
};

Sentence.prototype.calcul = function () {
    var sentence = this.name + " a facut curatenie pe " + this.date + " timp de " + this.hours + " si a fost " + this.result;
    return sentence;
}

<div>
 <form id="questions">
  <input type="text" id="name" ><br><br>
  <input type="text" id="date"><br><br>
  <input type="text" id="hours"><br><br>
  <input type="text" id="result"><br><br>
  <input type="submit" onclick="exampleSentence(event)">
 </form>
 <p id="example"></p>
</div>