Javascript 尝试分配多个onfocus事件

我试图让多个onfocus事件发生，但我似乎无法让它工作。只有第一个被拾起

<script>
function myFunction1(x) {
    x.style.background = "lightblue" 
} 

function myFunction2(x) {
    x.value.toUpperCase();
}
</script>

Enter your name: <input type="text" onfocus="myFunction1(this);myFunction2(this)">

函数myFunction1（x）{
x、 style.background=“浅蓝色”
} 
函数myFunction2（x）{
x、 value.toUpperCase（）；
}
输入您的姓名：

---

脚本位于head标记之间，需要保留在那里。我确信我只是错过了一些简单的事情，但似乎简单的事情总是最难弄清楚的

使用这种方式，您可以在同一元素上为同一类型的事件添加多个监听器，而不是使用非常有限的内联事件处理程序，并将关注点分开（html和js）

示例用法

let myElem = document.querySelector(".my-elem");
myElem.addEventListener("focus", (ev) => { // one handler });
myElem.addEventListener("focus", (ev) => { // another handler });

---

它正在工作，第二个函数只是不返回/记录任何内容

使用事件：

函数myFunction1（x）{
x、 style.background=“浅蓝色”
}
函数myFunction2（x）{
x、 value=x.value.toUpperCase（）
}

---

您的问题在这一行：

x.value.toUpperCase();

将该行更改为：

x.value = x.value.toUpperCase();

您需要将toUpperCase（）的结果分配给元素

函数myFunction1（x）{
x、 style.background=“浅蓝色”
}
函数myFunction2（x）{
x、 value=x.value.toUpperCase（）；
}

---

输入您的姓名：

两个函数都正在执行。实际上，您需要使用

 x.value = x.value.toUpperCase();

函数myFunction1（x）{
x、 style.background=“浅蓝色”
} 
函数myFunction2（x）{
x、 value=x.value.toUpperCase（）；
}

---

输入您的姓名：

好吧，您总是可以将它们合并到一个事件侦听器中。这样，您就不会用内联js将html弄乱，只需向

addEventListener

的回调块添加另一个函数，就可以轻松扩展焦点处理

函数myFunction1（x）{
console.log（'fn1 running'）；
x、 style.background=“浅蓝色”
}
函数myFunction2（x）{
console.log（'fn2 running'）；
x、 value.toUpperCase（）；
}
const inp=document.querySelector（'input'）；
inp.addEventListener（'focus'，function（）{
我的职能1（本）；
我的职能2（本）；
});
输入您的姓名：
这也不起作用，我尝试了Firefox和Edge。文本根本不适用于所有大写字母。一旦鼠标离开文本框，输入的文本将变为所有大写字母，对吗？@Bradderson使用该事件。我已经更新了我的答案