function - How to count string length, if length equals X, then execute code? - JavaScript - Stack Overflow

admin管理员组

文章数量:1405316

Using JavaScript, I want to call an anonymous function that checks the length of a string for every onkeyup event. When the string length equals 9, a conditional statement will execute a block of code. What am I doing wrong?

<input type="text" id="length_test" placeholder="Enter text here..." />

var length_test = document.getElementById('length_test');
var string_value = document.getElementById('length_test').value;
var x = 9;

length_test.onkeyup = function () {
        if (string_value.length == x) {
        // execute code here...
        }
    }

Using JavaScript, I want to call an anonymous function that checks the length of a string for every onkeyup event. When the string length equals 9, a conditional statement will execute a block of code. What am I doing wrong?

<input type="text" id="length_test" placeholder="Enter text here..." />

var length_test = document.getElementById('length_test');
var string_value = document.getElementById('length_test').value;
var x = 9;

length_test.onkeyup = function () {
        if (string_value.length == x) {
        // execute code here...
        }
    }

• javascript
• function
• anonymous-function
• string-length
• onkeyup

Share Improve this question Follow asked Apr 12, 2015 at 0:13 Trak BeastTrak Beast 2111 gold badge11 silver badge44 bronze badges 4

• you need to define string_value in the function so it's updated when the pare is made – dandavis Commented Apr 12, 2015 at 0:15
• Your code only fetches the value of the input element once. Move that line where you set "string_value" to inside the "keyup" handler. – Pointy Commented Apr 12, 2015 at 0:15
• essentially, if(length_test.value.length == x) since in all browsers, your first line does nothing... – dandavis Commented Apr 12, 2015 at 0:17
• Awesome Pointy! That worked. And thanks dandavis for the explanation, that helped to drive the concept home. This is my first question asked on Stack Overflow, I typically get the answer I need from browsing the pages. I can't wait to contribute. I appreciate all those with input. Power to the Programmers! – Trak Beast Commented Apr 12, 2015 at 0:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Give the following a try.

Note: The example below uses JQuery. If you didn't wait to use JQuery that is fine.

You could natively do it with the following.

document.getElementById("length_test").addEventListener("keyup", myFunction);

You would need to then create a function called myFunction that has your if statement in it.

$(document).ready(function() {
    $("#length_test").on("keyup", function(event) {
      if (event.currentTarget.value.length == 9) {
        //do your logic here
        alert("length is 9");
      }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="length_test" placeholder="Enter text here..." />

document.getElementById returns a live node. This means that any changes happening to the actual element in the page will be reflected on the object. When you write something else in the field, the value property of the element gets updated. However, the value stored in string_value doesn't get updated, since it's just a good old string, not some kind of live object.

Another way to see it is that
var string_value = document.getElementById('length_test').value;
makes a copy of the element's .value and stores it in string_value (even though that's not exactly how it works). When you type in the input, it updates the .value but not the string_value variable.

But what you should do is:

document.getElementById('length_test').addEventListener("keyup", function(e) {
  if(e.target.value.length === 9) {
    alert("length is 9");
  }
});

This is much better because document.getElementById is only executed once, when binding the event. Event listener functions can revieve the event through their first argument (monly named e). e.target is the element which called the event, in this case the input element.

You could try:

<input type="text" id="length_test" placeholder="Enter text here..." onkeyup="keyupFunction()">
<script type = "text/javascript">
    keyupFunction function () {
        if(document.getElementById('length_test').value == 9) {
            // execute code here...
        }
    }
</script>

Alternatively, you could use javascript to add an event listener to the input element:

<input type="text" id="length_test" placeholder="Enter text here...">
<script type = "text/javascript">
    document.getElementById('length_test').addEventListener("keyup", function(evt) {
        if(document.getElementById('length_test').value == 9) {
            // execute code here...
        }
    });
</script>

本文标签：