Получение ввода текста в HTML и передачи JavaScript

Question

Я понимаю, как использовать ввод в HTML для вызова JavaScript, определенный в том же каталоге, что и HTML ех:

<input type="button" value="Submit" onclick="someFunc(500)" > 

так, если кнопка нажата Java-скрипт запустите someFunc (500), есть ли способ ввода текста, а когда нажата кнопка, используйте этот вход в качестве значения параметра для java-скрипта? Я знаю, что это не будет работать, и я даже не определяя кнопку, но что-то вроде

<input type="text" id= "example" onclick="someFunc(this.value)"> 

где пример данных, который был введен в поле ввода текста?

Answer 1

Вы можете сделать это с помощью JQuery: Смотрите эту jsfiddle

HTML:

<input type="text" id="example" value="12345"> 

JavaScript:

$('#example').on('click',function() { 
    console.log($(this).val()); // 12345 
}); 

В HTML 5 Рекомендуемый способ, заключается в использовании данных - * атрибуты. Как это:

HTML:

<div id="example2" data-product-id="my-product-1"></div> 
<button id="getProductId">Get Product Id</button> 

JavaScript:

$('#getProductId').on('click',function() { 
    console.log($('#example2').attr('data-product-id')); // my-product-1 
}); 

Answer 2

Что об использовании слушателя?

var example = document.getElementById("example"); 
example.onclick = function(){ 
    someFunc(example.value); 
} 

Answer 3

<script type="application/javascript"> 
    function someFunc() { 
    var value = document.getElementById('example').value; 

    // do something with value here 

    return false; 
    } 
</script> 

<input type="text" id="example"> 
<input type="button" value="Submit" onclick="someFunc()" >