I’m wanting to input a phone number into a form element, and generate a clickable TEL:
link.
When a user inputs a number, it should display a clickable link with that number in the paragraph below.
Example, if you enter 800-888-8888 it would generate html code: <a href="tel:800-888-8888">800-888-8888</a>
JavaScript
x
6
1
<form>
2
<label>Phone Number</label><br>
3
<input type="text" id="phone" >
4
</form>
5
<p id="telLink">This text will be replaced by the link</p>
6
Advertisement
Answer
JavaScript
1
16
16
1
<form>
2
<label>Phone Number</label><br>
3
<input type="text" id="phone" onchange="generateLink(this.value)">
4
</form>
5
<p id="telLink">This text will be replaced by the link</p>
6
7
<script>
8
function generateLink(number) {
9
if (number.length) {
10
document.getElementById('telLink').innerHTML = `<a href="tel:${number}">${number}</a>`
11
} else {
12
document.getElementById('telLink').innerHTML = 'This text will be replaced by the link'
13
}
14
}
15
</script>
16
**Edited to correct the closing a
tag