Scribd
Upload
48 views

API Examples

The document contains multiple examples of using JavaScript to interact with HTML elements and access browser APIs. It demonstrates validating form input values, checking for overflow in number fields, storing and retrieving values from local and session storage, fetching text from a file, and getting the user's geolocation using the browser API.

Uploaded by

Feelings Of Indian Youth
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
48 views

API Examples

The document contains multiple examples of using JavaScript to interact with HTML elements and access browser APIs. It demonstrates validating form input values, checking for overflow in number fields, storing and retrieving values from local and session storage, fetching text from a file, and getting the user's geolocation using the browser API.

Uploaded by

Feelings Of Indian Youth
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<html>

<head></head>
<body>

<input id="id1" type="number" min="100" max="300" required>


<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
const inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>

<input id="id1" type="number" max="100">


<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
}
}
</script>

<p id="demo"></p>

<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>

<p id="demo"></p>

<script>
sessionStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>

<p id="demo">Fetch a file to change this text.</p>


<script>

let file = "fetch_info.txt"

fetch (file)
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);

</script>
<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
<html>

You might also like