Передать параметр из ввода в метод onclick

Question

Я хочу передать введенный номер телефона функции callCustomer () на моей кнопке.

Как бы я об этом узнал.

<button onclick="callCustomer(document.getElementById('#phone'))" type="button" name="call" id="call" class="btn btn-primary btn-lg call-customer-button">
  <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
                  Call customer
</button>

<input type="text" id="phone" name"phone">

следующее возвращаемое значение null

Answer 1

Проблема с вашим кодом заключается в том, что у вас есть префикс # в значении id, которое вы указываете getElementById(). Это должно быть удалено.

Однако следует отметить, что гораздо лучше использовать ненавязчивые обработчики событий вместо встроенных. Во-вторых, поскольку input, который вы пытаетесь получить, имеет значение id, было бы легче прочитать его значение из DOM, когда происходит событие. Поскольку вы пометили вопрос с помощью jQuery, вот пример, использующий это:

$('#call').on('click', function() {
  var phone = $('#phone').val();
  
  console.log(phone);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" name="call" id="call" class="btn btn-primary btn-lg call-customer-button">
  <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
  Call customer
</button>

<input type="text" id="phone" name "phone" value="07777 777 777" />

Если вам это нужно, вот простой эквивалент JS:

document.getElementById('call').addEventListener('click', function() {
  var phone = document.getElementById('phone').value;
  console.log(phone);
});

<button type="button" name="call" id="call" class="btn btn-primary btn-lg call-customer-button">
  <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
  Call customer
</button>

<input type="text" id="phone" name "phone" value="07777 777 777" />

Answer 2

function callCustomer(id)
{
//Javascript
 console.log(id.value);
//or
 console.log(document.getElementById('phone').value);
 //or  --Jquery
  console.log($('#phone').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<button onclick="callCustomer(document.getElementById('phone'))" type="button" name="call" id="call" class="btn btn-primary btn-lg call-customer-button">
  <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
                  Call customer
</button>

<input type="text" id="phone" name"phone">

попробуйте это

Answer 3

Удалить # из селектора как getElementById() по умолчанию обрабатывает значение параметра как id. Затем используйте свойство value переданного элемента внутри функции:

function callCustomer(el){
  console.log(el.value);
}

<button onclick="callCustomer(document.getElementById('phone'))" type="button" name="call" id="call" class="btn btn-primary btn-lg call-customer-button">
  <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
                  Call customer
</button>

<input type="text" id="phone" name"phone">