JS初学者提问onchange问题，谢谢大神

Question

 <input type = "text" id = "demo1" onchange = "changeWord()">

这个输入框，鼠标离开变为大写字母，非常简单，可以实现，但是我改了一些地方就不行了
原来
function changeWord(){
var x = document.getElementById("demo1");
x.value = x.value.toUpperCase();
}
鼠标离开输入款 字母变为大写 ，没有问题
改变之后
function changeWord(){
var x = document.getElementById("demo1").value;//加了.value
x = x.toUperCase();//缺少了.value
}这样就不行了，我感觉这跟java中的一样赋值啊，不知道这个.value 跟不加这个.value有什么区别？
为什么要复杂的写成这样子？x.value = x.value.toUpperCase()？在前面加上.value后面不就能写成
x = x.toUperCase();
但是这样不行，没效果了
新手JS求助

Answer 1

当然
var x = document.getElementById("demo1");
x.value = x.value.toUperCase();
的意思是，x是一个控件，将它的值转换为大写，再设置给这个控件的value属性
而
var x = document.getElementById("demo1").value;//加了.value
x = x.toUperCase();//缺少了.value
的意思是，x是一个字符串，它等于原先文本控件的值，然后让这个字符串转换为大写，再更新字符串，但是这不会影响原来的控件，除非再加上
document.getElementById("demo1").value = x;