javaScript เช็ค if else ค่ามากกว่าน้อยกว่า

ทำไม เรากำหนดตัวแปลไว้หนึ่งตัว ให้เท่ากับ 10
var x1 = "10";

แล้วรับค่ามากจาก Input ที่เป็นเลขมากกว่า 1 เช่น Input มาเป็น 2

แต่พอเช็ค if else แล้ว มันบอกว่า 2 มากกว่า 10 งงมาก ช่วยดูให้หน่อยครับ

หรือดูจากลิงค์รูปก็ได้นะครับ
Link : https://www.img.in.th/image/73Gl
ปล. ผมลองทดสอบกับเว็ป w3schools.com
ขอบคุณมากครับ

<!DOCTYPE html>
<html>
<body>

<input name="test" id="test"/>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x1 = document.getElementById("test").value;
    var x2 = "10";

    if(x1 > x2){
         document.getElementById("demo").innerHTML = x1+" : "+x2+" input > 10";
    }else{
         document.getElementById("demo").innerHTML = x1+" : "+x2+" input < 10";
    }
}
</script>
</body>
</html>
แก้ไขข้อความเมื่อ
คำตอบที่ได้รับเลือกจากเจ้าของกระทู้
ความคิดเห็นที่ 3
ก็เอา string ไปเปรียบเทียบกับ string นี้
มันต้อง เอาไป parseInt ก่อน

var x1=parseInt(document.getElementById("test").value);
var x2=parseInt("10");
แสดงความคิดเห็น
โปรดศึกษาและยอมรับนโยบายข้อมูลส่วนบุคคลก่อนเริ่มใช้งาน อ่านเพิ่มเติมได้ที่นี่