JavaScript函数构造函数与原型实现表单数据获取问题求助

Hey there! Let's work through why your code isn't behaving as expected and get it up and running. I see you're diving into constructor functions and prototypes—awesome, let's make this click for you.

What's Going Wrong? #

There are a couple key issues stopping your code from working:

• You're calling the Sentence() constructor, but never invoking the calcul() prototype method that actually builds and displays your sentence.
• The form's default submission behavior is refreshing the page, so even if your code ran, you'd never see the result.
• Your constructor function defines parameters (name, date, hours, result) that you aren't actually using (you're grabbing values directly from the DOM), which adds unnecessary confusion.

Corrected Code #

Let's adjust your HTML and JavaScript to fix these issues:

Updated HTML

<div>
  <form id="questions">
    <input type="text" id="name" placeholder="Nume"><br><br>
    <input type="text" id="date" placeholder="Data"><br><br>
    <input type="text" id="hours" placeholder="Ore"><br><br>
    <input type="text" id="result" placeholder="Rezultat"><br><br>
    <input type="submit" value="Generează Propoziția">
  </form>
  <p id="example"></p>
</div>

Updated JavaScript

// Constructor function - no need for parameters since we're fetching DOM values directly
function Sentence() {
  this.name = document.getElementById('name').value;
  this.date = document.getElementById('date').value;
  this.hours = document.getElementById('hours').value;
  this.result = document.getElementById('result').value;
}

// Prototype method to build and display the sentence
Sentence.prototype.calcul = function () {
  // Use template literals for cleaner string concatenation
  const sentence = `${this.name} a facut curatenie pe ${this.date} timp de ${this.hours} si a fost ${this.result}`;
  document.getElementById("example").innerHTML = sentence;
  return sentence;
}

// Handle form submission (prevents page refresh and triggers our logic)
document.getElementById('questions').addEventListener('submit', function(event) {
  // Stop the form from reloading the page
  event.preventDefault();
  
  // Create a new Sentence instance with the form values
  const userSentence = new Sentence();
  
  // Call the prototype method to generate and show the sentence
  userSentence.calcul();
});

What Changed? #

• Removed unused parameters: The constructor now directly fetches values from your form inputs, no extra parameters needed.
• Added form submission listener: Instead of using an inline onclick, we're using a proper event listener to handle the form's submit event. This is more maintainable and avoids global function pollution.
• Prevented page refresh: event.preventDefault() stops the browser from reloading the page when the form is submitted, so your sentence stays visible.
• Explicitly called the prototype method: We create a Sentence instance and then run calcul() on it to build and display the sentence—this was the missing piece in your original code!

How It Works Now #

1. Fill out all the form inputs.
2. Click the submit button.
3. The form won't refresh, and your custom sentence will appear in the <p id="example"> element below the form.

内容的提问来源于stack exchange，提问作者Ciprian