如何在input2中追加随机数而非替换输入值？JS代码问题排查

我在input2中设置值时，RanNum完全替换了输入值，希望将它追加到输入值后面，请问代码哪里出错了？当input1输入为"hey hey"时，我希望另外三个输入框的输出为：

heyhey7@gmail.com（7是随机生成的RanNum）
heyhey@gmail.com
heyhey@gmail.com

原代码 #

JavaScript

var min = 1;
var max = 9;
var RanNum = Math.floor(Math.random() * (max - min + 1)) + min;
  
var input1 = document.getElementById('first_name');
var input2 = document.getElementById('email');
var input3 = document.getElementById('username');
var input4 = document.getElementById('location');

input1.addEventListener('change', function() {
  input2.value = input1.value.replace(/\s+/g,'').trim().value=RanNum + "@gmail.com";
  //input2.value = input1.value.replace(/\s+/g,'').trim() + .value=RanNum + "@gmail.com";
  input3.value = input1.value.replace(/\s+/g,'').trim() + "@gmail.com";
  input4.value = input1.value.replace(/\s+/g,'').trim() + "@gmail.com";
});

HTML

<input type="text" id="first_name" />
<input type="text" id="email" />
<input type="text" id="username" />
<input type="text" id="location" />

错误原因 #

你给input2赋值的代码逻辑错误：

input2.value = input1.value.replace(/\s+/g,'').trim().value=RanNum + "@gmail.com";

这里input1.value.replace(/\s+/g,'').trim()返回的是字符串，字符串没有.value属性，且连续赋值的写法会让最终input2.value被赋值为RanNum + "@gmail.com"，直接覆盖了前面处理好的输入值，导致看不到输入值的部分。

修正后的代码 #

把input2的赋值语句改成字符串拼接形式，将处理后的输入值、RanNum和邮箱后缀连在一起即可，同时建议把处理后的输入值存为变量，避免重复调用方法，让代码更简洁：

var min = 1;
var max = 9;
var RanNum = Math.floor(Math.random() * (max - min + 1)) + min;
  
var input1 = document.getElementById('first_name');
var input2 = document.getElementById('email');
var input3 = document.getElementById('username');
var input4 = document.getElementById('location');

input1.addEventListener('change', function() {
  const processedValue = input1.value.replace(/\s+/g,'').trim();
  input2.value = processedValue + RanNum + "@gmail.com";
  input3.value = processedValue + "@gmail.com";
  input4.value = processedValue + "@gmail.com";
});

内容的提问来源于stack exchange，提问作者Elaine Byene