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

【问题标题】：Javascript, update value by 2 events and concatenateJavascript，通过 2 个事件更新值并连接
【发布时间】：2019-09-18 07:09:19
【问题描述】：

一个简单的问题。我有 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);
});

当我选择“Down”时，我的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'

欢迎大家帮忙，谢谢.....

【问题讨论】：

标签： javascript events concatenation

【解决方案1】：

我试图理解你的意思。在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">

【讨论】：

这对你的例子很好。这正是我想要的。但在我的例子中，我对select.addEventListener('change', (e)=>{ 有问题，我使用 phprunner，它有所不同。

【解决方案2】：

使用 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);

【讨论】：

最后两行不起作用。我一无所有。最后两行可能需要一个事件？
我只报告了设置的代码，但肯定需要一个事件。

【解决方案3】：

Adel B 的提示，有效。但在phprunner下我认为是不同的。我尝试用它来调整 Abel D 代码：

var select = Runner.getControl(pageid,'Producto_tipo');
var txt1 = Runner.getControl(pageid,'Producto_tipo');
var txt2 = Runner.getControl(pageid,'Espesor');
var txt3 = Runner.getControl(pageid,'EspesorNEW');

//select.addEventListener('change', (e)=>{ //<- with '=>' I have error
select.addEventListener('change', function(e){
    //txt1.value = e.target.value;
    txt1.value = e.target.value;
    //txt3.value = txt1.value + txt2.value;
    txt3.value = txt1.value + txt2.value;
})

//txt2.addEventListener('keyup', (e)=>{//<- with '=>' I have error
    txt2.addEventListener('keyup', function(e){
    //txt3.value = txt1.value + (txt2.value);
    txt3.value = txt1.value + (txt2.value);
})

但是什么都没有……

【讨论】：