Cognizant Handson - Error Message

 

Error Message

Create an HTML page that should display the error status message when the user clicks the button ‘Click to Get the Employee Data’  with the id “btn-id” to load the JSON file ‘employee.json’ does not exist.  Use jquery ajax() to perform the task.  Display the error message “Error Message: Not found” in a div tag with the id ‘err-id’.

 Note:

1. Do not alter the files employee.html
2. Write your code in employee.js file
3. Avoid writing the jQuery 'document ready' method for the proper web page visibility.
4. Do not use 'ES6' features.



Sample Page:


Solution:

employee.html

<!-- DO NOT ALTER THIS FILE -->

<!DOCTYPE html>

<html>

<body>

    <button id="btn-id">Click to Get the Employee Data</button>

<br><br>

    <div id="err-id"></div>

    

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

 <script src="employee.js"></script>

 

</body>

</html>

employee.js

$(document).ready(function(){
    $("#btn-id").click(function(){
        try{
            $('#err-id').load('employee.json');
        }
        catch(e){
            document.getElementById('err-id').innerHTML="Error Message: Not found";
        }
    })
});

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.