Javascript，通过 2 个事件更新值并连接

Question

一个简单的问题。我有 2 个控制更改事件。

我有第一个事件：

ctrlProducto_tipo.on  ('change', function(e){

  if (this.getValue()== 'Up'){

    var strProducto = 'U';}

  if (this.getValue()== 'Down'){

    var strProducto = 'D';}

  if (this.getValue()== 'Left'){

    var strProducto = 'L';}

  if (this.getValue()== 'Right'){

    var strProducto = 'R';}

  ctrlTest1.setValue(strProducto);

});

当我选择“向下”时，我的text1.textfield“D”中有

在我要显示的第二个事件中Test2.textbox：

ctrlEspesor.on  ('keyup', function(e){

if (this.getValue()!== ''){

var strEspesor = ctrlEspesor.getValue();}

ctrlTest2.setValue(strEspesor);

当我输入'4'时，我有'4'。

这两个事件有效。但是现在我尝试连接strProducto和strEspesor到ctrlTest3.textbox（在ctrlTest1&之前不显示ctrlTest2）。

但是每次用户更改两个值之一时，我都需要ctrlText3即时更新。

我试试这个，没有成功。

var valueFinal = strProducto.concat(strEspesor);

ctrlTest3.setValue(valueFinal);

示例ctrlTest3：'D4'

欢迎提供大帮助，谢谢.....

Answer 1

使用 valueFinal，您不能在函数内调用 strProducto 和 strEspesor 来解决作用域问题，解决方案是全局设置有问题的两个变量。var strProducto;  //globaslctrlProducto_tipo.on  ('change', function(e){    if (this.getValue()== 'Up'){        strProducto = 'U';}    if (this.getValue()== 'Down'){        strProducto = 'D';}    if (this.getValue()== 'Left'){        strProducto = 'L';}    if (this.getValue()== 'Right'){        strProducto = 'R';}ctrlTest1.setValue(strProducto);});var strEspesor; //globalctrlEspesor.on  ('keyup', function(e){    if (this.getValue()!== ''){        strEspesor = ctrlEspesor.getValue();}ctrlTest2.setValue(strEspesor);var valueFinal = strProducto.concat(strEspesor);ctrlTest3.setValue(valueFinal);

Answer 2

我试图理解你的意思。在codepen 上检查一下。Javascriptvar select = document.getElementById('select');var txt1 = document.getElementById('text1');var txt2 = document.getElementById('text2');var txt3 = document.getElementById('text3');select.addEventListener('change', (e)=>{&nbsp; txt1.value = e.target.value;&nbsp; txt3.value = txt1.value + txt2.value;})txt2.addEventListener('keyup', (e)=>{&nbsp; txt3.value = txt1.value + txt2.value;})HTML部分&nbsp; <select id="select">&nbsp; &nbsp; <option value="u">Up</option>&nbsp; &nbsp; <option value="d">Down</option>&nbsp; &nbsp; <option value="l">Left</option>&nbsp; &nbsp; <option value="r">Right</option>&nbsp; </select><br>&nbsp; <input type="text" id="text1"><br>&nbsp; <input type="text" id="text2"><br>&nbsp; <input type="text" id="text3">