I'm looking to pass the input phone number, into the callCustomer() function on my button.
How would I got about this.
<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">
The following return null
The issue with your code is because you have the # prefix on the id value you provide to getElementById(). That should be removed.
However it should be noted that it's much better practice to use unobtrusive event handlers instead of inline ones. Secondly, as the input you're trying to get the value of has an id it would be easier to read its value from the DOM when the event occurs. As you've tagged the question with jQuery, here's an example using that:
$('#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" />Should you need it, here's the plain JS equivalent:
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" />Remove # from the selector as getElementById() treats the parameter value as id by default. Then use the value property of the passed element inside the function:
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">
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">try this
console.log() instead of alert() for debugging.
document.querySelector()