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

Question

详情

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

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

示例应该是事件驱动的。

如果用户输入，则产品必须更改。
如果用户生成了新号码，则产品也必须更改。

问题：

只有 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 以完成 Math.所以不需要，建议正确转换值。

Answer 2

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

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

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

由于 HTML id #myinput3

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

我不得不用 on(...) 附件机制替换 addEventListener(...)。

工作替换：

$('#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>

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

How can HTML <output> element changes trigger further events?

html

javascript

jquery

dom-events

jquery-events

详情

问题：

问题：

例子