HTML <output> 元素更改如何触发更多事件？

Question

详情

我有一个例子，输入和输出元素在同一个站点上。

1. 生成<output>元素值
2. <input> 元素值由用户指定
3. 还有另一个 <output> 元素，其中显示了 1. 和 2. 元素产品。

示例应该是事件驱动的。

• 如果用户输入一个输入，产品必须改变。
• 如果用户生成了新编号，则产品也必须更改。

问题：

• 只有 Typed 参数会导致 Product 元素的值发生变化。可能有一些原因，由于 Generated number 的变化没有触发产品计算。

问题：

如果更改 Generated number 或 Typed 参数，我如何修改我的示例以计算 Product？

示例

function generate() {
  var generatedValue = Math.floor(Math.random() * 100);
  $("#myinput1").val(generatedValue);
  $("#myinput1").trigger("myOwnEvent");
};

$('#myinput2')[0].addEventListener('input', calculateTheProduct);
$('#myinput3')[0].addEventListener('myOwnEvent', calculateTheProduct);

function calculateTheProduct() {
  var inputGeneratedValue = $('#myinput1')[0].value;
  var inputTypedParameter = $('#myinput2')[0].value;
  var product = inputGeneratedValue * inputTypedParameter;
  $('#myinput3').val(product);
};

body {
  margin: 20px;
  font-size: 30px;
}

label {
  font-size: 20px;
  margin: 20px;
  font-weight: bold;
}

.inputClass {
  font-size: 20px;
  max-width: 200px;
  margin: 20px 0 20px 0;
  background-color: #DFDFDF;
}

.typeInput {
  background-color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h1>Hello World</h1>

<button onclick="generate()">Generate</button>

<div class="input-group" class="numberDiv">
  <label for="myinput1">Generated number:</label>
  <output id="myinput1" class="form-control inputClass">
        0
  </output>
</div>

<div class="input-group" class="numberDiv">
  <label for="myinput1">Typed parameter:</label>
  <input id="myinput2" class="form-control inputClass typeInput" value="0">
</div>

<div class="input-group" class="numberDiv">
  <label for="myinput3">Product:</label>
  <output id="myinput3" class="form-control inputClass" value="0">
        0
  </output>
</div>

Answer 1

考虑以下内容。

$(function() {
  function generate() {
    var generatedValue = Math.floor(Math.random() * 100);
    $("#myinput1").val(generatedValue);
    $('#myinput2').trigger("change");
  };

  $('#myinput2').change(calculateTheProduct);
  $("#generate").click(generate);

  function calculateTheProduct() {
    $('#myinput3').val(parseInt($("#myinput1").val()) * parseInt($('#myinput2').val()));
  };
});

body {
  margin: 20px;
  font-size: 30px;
}

label {
  font-size: 20px;
  margin: 20px;
  font-weight: bold;
}

.inputClass {
  font-size: 20px;
  max-width: 200px;
  margin: 20px 0 20px 0;
  background-color: #DFDFDF;
}

.typeInput {
  background-color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h1>Hello World</h1>

<button id="generate">Generate</button>

<div class="input-group" class="numberDiv">
  <label for="myinput1">Generated number:</label>
  <output id="myinput1" class="form-control inputClass">
        0
  </output>
</div>

<div class="input-group" class="numberDiv">
  <label for="myinput1">Typed parameter:</label>
  <input id="myinput2" class="form-control inputClass typeInput" value="0">
</div>

<div class="input-group" class="numberDiv">
  <label for="myinput3">Product:</label>
  <output id="myinput3" class="form-control inputClass" value="0">
        0
  </output>
</div>

这将生成一个随机数，如果有类型值，它将计算产品。如果用户改变类型，它也会计算产品。

由于您无法控制用户可以输入的内容，因此使用parseInt() 可能很重要。 JS 将自动转换为 Int 以完成数学运算。所以它不是必需的，建议正确转换值。

Answer 2

在调查了jquery API about the triggering之后，我意识到了一个解决方案：

我在这一行的示例代码中遇到了问题：

$('#myinput3')[0].addEventListener('myOwnEvent', calculateTheProduct);

1. 由于 HTML id #myinput3 存在拼写错误

这个 id 应该被称为 HTML 元素 #myinput1 虽然这本身并不能解决我的问题。

1. 我不得不将 addEventListener(...) 替换为 on(...) 附件机制。

工作替换：

$('#myinput1').on('myOwnEvent', calculateTheProduct);

以下是工作示例：

function generate() {
  var generatedValue = Math.floor(Math.random() * 100);
  $("#myinput1").val(generatedValue);
  $("#myinput1").trigger("myOwnEvent");
};

$('#myinput2')[0].addEventListener('input', calculateTheProduct);
$('#myinput1').on('myOwnEvent', calculateTheProduct);

function calculateTheProduct() {
  var inputGeneratedValue = $('#myinput1')[0].value;
  var inputTypedParameter = $('#myinput2')[0].value;
  var product = inputGeneratedValue * inputTypedParameter;
  $('#myinput3').val(product);
};

body {
  margin: 20px;
  font-size: 30px;
}

label {
  font-size: 20px;
  margin: 20px;
  font-weight: bold;
}

.inputClass {
  font-size: 20px;
  max-width: 200px;
  margin: 20px 0 20px 0;
  background-color: #DFDFDF;
}

.typeInput {
  background-color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h1>Hello World</h1>

<button onclick="generate()">Generate</button>

<div class="input-group" class="numberDiv">
  <label for="myinput1">Generated number:</label>
  <output id="myinput1" class="form-control inputClass">
        0
  </output>
</div>

<div class="input-group" class="numberDiv">
  <label for="myinput1">Typed parameter:</label>
  <input id="myinput2" class="form-control inputClass typeInput" value="0">
</div>

<div class="input-group" class="numberDiv">
  <label for="myinput3">Product:</label>
  <output id="myinput3" class="form-control inputClass" value="0">
        0
  </output>
</div>