javascript - 入力ボックスに一定数の文字が含まれている場合

Question

<input type="text"/> <button>Go</button>

<div id="example">
</div>

クリックしたときに5文字が含まれている場合は.append「何とか」、そうでない場合は「その他」にするにはどうすればよいですか?#exampleinputbutton.append

Answer 1

var example = $('#example');    //get example div
var input = $('input').get(0);  //get first input in the set of inputs

$('button').click(function(){   //bind click handlers to (any) button
   var value = input.value;     //get the (first) input's value
   if(value.length === 5){      //check the value
      example.append('Blah');
   } else {
      example.append('Other');
   }
});

Answer 2

$('button').click(function() {
    var $example = $('#example');
    if ($('input').val().length == 5) {
        $example.append('Blah');
    } else {
        $example.append('Other');
    }
});

http://jsfiddle.net/zerkms/cks45/

Answer 3

$(function(){
  $('button').click(function(){        
    if($('input').val().length == 5){
      $('#example').append('blah');
    }else{
      $('#example').append('Other');
    }
  }); 
}); 

Answer 4

jqueryを使いたくない場合は...

HTML

<input id="input1" type="text"/> <button onclick="go('input1')">Go</button>

<div id="example">
</div>

JavaScript

function go(inputId){
    document.getElementById("example").innerHTML += document.getElementById(inputId).value.length === 5 ? "bla" : "other";
}

これには、入力用の ID とボタン用の onclick イベント ハンドラーを含めるように HTML を変更する必要がありました。

Answer 5

純粋なJSの方法

var butt = document.getElementsByTagName("button")[0],
    input =  document.getElementsByTagName("input")[0],
    example = document.getElementById("example");

butt.onclick = function(){
    if(input.value.length == 5){
        example.textContent += "blah";
    }else{
        example.textContent += "other";
    }
}

</p>

ライブデモ </p>

Answer 6

$('button').on('click',function() { 
    $('#example').text(
        $('#example').text() +
        ($('input[type=text]').val().length==5?'Blah':'Other')
    );
} );