在 Javascript 中使用函数构造函数和原型检索表单数据答案

【问题标题】：Retrieve form data with function constructor and prototype in Javascript在 Javascript 中使用函数构造函数和原型检索表单数据
【发布时间】：2020-10-19 11:03:52
【问题描述】：

我正在尝试学习 JavaScript 中的函数构造函数和原型方法，但我似乎不太了解它们。我正在尝试从表单中检索信息，添加输入中写入的所有值，并有一个新的 <p> 元素将所有这些值组合成一个句子。但我不能让它工作......

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;
}

【问题讨论】：

标签： javascript function methods constructor prototype

【解决方案1】：

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

要从 Function 创建实例，您必须在函数上使用 new 运算符。此外，由于组合所有属性的逻辑是在计算方法中。你需要这样的东西：

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

但是，我建议您使用Sentence 构造函数可用的参数来设置句子实例的属性，如下所示：

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

而且，您的 onclick 事件将如下所示：

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

另外，由于所有这些都变得混乱，我建议您从 HTML 中删除事件处理程序并将其添加到 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();
}

同样，由于您的 calcul 方法负责将表单值组合成一个段落，您应该重构 calcul 方法以组合值并返回结果句子，但不负责附加它：

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;
}

而且，您的 exampleSentence 方法将如下所示：

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();
}

这一切的结果是：

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>

【讨论】：

感谢您的帮助！在 HTML 文件中添加那么多 javascript 数据不是一个坏习惯吗？根据我在网上阅读的内容，我应该尽量在 HTML 文档中编写尽可能少的 JavaScript，并将它们分开。
@Ciprian 我正在以渐进的方式编写答案。请检查编辑，因为这正是我的建议！
我现在阅读了您的回复，感谢您的详细解释，效果很好！看来我需要阅读有关 preventDefault() 的信息，因为我不太明白在做什么。再次感谢！
@Ciprian HTML 元素附加了默认行为，form 元素中的button 元素的默认行为如果未明确指定为type="button"，则将表单提交到给定的 URL并且由于您没有在form 上指定action 属性，因此默认行为是提交回自身。在这种情况下，所有这些都转化为页面刷新。我们不希望那样。因此，我们明确告诉浏览器我们不希望使用preventDefault() 执行默认行为。祝你好运！继续学习。
有道理！感谢传播知识，感谢鼓励！也祝你好运！

【解决方案2】：

你可以这样做：

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;
};

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;
}

<div>
 <p id="example"></p>
 <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="new Sentence().calcul()">
 </form>
</div>

【讨论】：