jquery将值放到输入框中

Question

I have this script

---

<script>
    function trigger(){
    var x = document.getElementById('xcoord');
    var y = document.getElementById('ycoord');
    var box = document.getElementById('touch');

    if (x.value >= 325 || x.value <= 300 && y.value >= 55 || y.value <= 25) {
    $('#touch').value('passed');

    }

    }  
</script>

---

here is the html

---

 <input onchange="trigger()" required type="number" id="xcoord" name="xcoord">
 <input onchange="trigger()" required type="number" id="ycoord" name="ycoord">
 <input required type="text" id="touch" name="touch">

---

i need a value to be displayed everytime the value of the xcoord and ycoord suits the condition, but no value is printed even the condition is true.

Answer 1

You have mixed plain JavaScript with JQuery .

Put value to input box with JavaScript

box.value = 'passed';

CodeSnippet

 function trigger(){ var x = document.getElementById('xcoord'); var y = document.getElementById('ycoord'); var box = document.getElementById('touch'); if (x.value >= 325 || x.value <= 300 && y.value >= 55 || y.value <= 25) { box.value = 'passed'; } } 

 <input onchange="trigger()" required type="number" id="xcoord" name="xcoord"> <input onchange="trigger()" required type="number" id="ycoord" name="ycoord"> <input required type="text" id="touch" name="touch"> 

Put value to input box with JQuery

$('#touch').val('passed'); //Although you already have the box variable

CodeSnippet

  function trigger(){ var x = document.getElementById('xcoord'); var y = document.getElementById('ycoord'); var box = document.getElementById('touch'); if (x.value >= 325 || x.value <= 300 && y.value >= 55 || y.value <= 25) { $('#touch').val('passed'); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input onchange="trigger()" required type="number" id="xcoord" name="xcoord"> <input onchange="trigger()" required type="number" id="ycoord" name="ycoord"> <input required type="text" id="touch" name="touch"> 

tl;dr;

Since you started code with plain JavaScript you confused how to change the value with jQuery syntax.

JavaScript box.value = 'passed';

jQuery $('#touch').val('passed');

Answer 2

You are using the jQuery Library. Use better than jQuery methods.

 $("#xcoord , #ycoord").on("keyup", function(){ var x = $('#xcoord').val(); var y = $('#ycoord').val(); $('#touch').val((x >= 325 || x <= 300) && (y >= 55 || y <= 25)?'passed':''); } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input required type="number" id="xcoord" name="xcoord" value="0"> <input required type="number" id="ycoord" name="ycoord" value="0"> <input required type="text" id="touch" name="touch"> 

Answer 3

它应该是

 $('#touch').val('passed');