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;  //globasl

ctrlProducto_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; //global

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

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

        strEspesor = ctrlEspesor.getValue();}

ctrlTest2.setValue(strEspesor);

var valueFinal = strProducto.concat(strEspesor);

ctrlTest3.setValue(valueFinal);

Answer 2

我试图理解你的意思。在codepen 上检查一下。

Javascript

var select = document.getElementById('select');

var txt1 = document.getElementById('text1');

var txt2 = document.getElementById('text2');

var txt3 = document.getElementById('text3');

select.addEventListener('change', (e)=>{

  txt1.value = e.target.value;

  txt3.value = txt1.value + txt2.value;

})

txt2.addEventListener('keyup', (e)=>{

  txt3.value = txt1.value + txt2.value;

})

HTML部分

  <select id="select">

    <option value="u">Up</option>

    <option value="d">Down</option>

    <option value="l">Left</option>

    <option value="r">Right</option>

  </select><br>

  <input type="text" id="text1"><br>

  <input type="text" id="text2"><br>

  <input type="text" id="text3">