Make sure to copy the code and run the HTML file first. For organization, place the JavaScript file in the scripts folder and the CSS file in the styles folder.
The issue at hand is that the li elements are not displaying horizontally as intended; they need to be wrapped properly.
Upon adding student information in the HTML page without refreshing, each new detail appears on the page. The problem arises with the two checkboxes that determine the type of view. The desired outcome is for these elements to appear horizontally. Instead of wrapping onto a new line once it crosses the region of the ul element, there should be a horizontal scroll feature.
var name;
var age;
var dob;
var id;
var street;
var city;
var id1;
// Declarations for variables
function ver() {
console.log("Vertical view");
$("#displayDetails").removeClass("hor").addClass("ver");
}
function hor() {
console.log("Horizontal View");
$("#displayDetails").removeClass("ver").addClass("hor");
}
$(window).load(function() {
// Triggered when the entire page, including frames, objects, and images, is fully loaded
console.log("Window has finished loading");
});
$(document).ready(function() {
// Executes when the HTML document is loaded and the DOM is prepared
console.log("Inside document.ready(function())");
$("button").click(function() {
// Event listener for button click
...
// More code goes here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
....
// Remaining HTML and script codes go here