Javascript 用另一个字段的输入值填充输入值

我想用输入到first_name和last_name字段中的值填充host_name的输入值，以便在host_name字段中显示全名。这些字段位于同一页上。Jquery或纯JS

<label for="first_name">First Name</label
<input id="first_name" type="text" name="first_name">

<label for="last_name">Last Name</label
<input id="last_name" type="text" name="first_name">

<label for="host_name">Host Name</label
<input id="host_name" type="text" name="host_name"> 

名字
我希望这就是你要找的。
$（“#first#u name，#last#u name”）.on（“input”，function（）{$（“#host#u name”）.val（$（“#first#u name”）.val（）+“+$（“#last#u name”）.val（））}
。那么到底是什么问题呢？
let firstName = document.getElementById("first_name");
let lastName = document.getElementById("last_name");
let hostName = document.getElementById("host_name");

firstName.addEventListener("change", (event) => {
    hostName.setAttribute("value", event.target.value);
});

lastName.addEventListener("change", (event) => {
    let firstValue = hostName.getAttribute("value");
    let lastValue = event.target.value;
    hostName.setAttribute("value", firstValue + " " + lastValue);
});