stackoom
  简体   繁体   中英

I have written JavaScript code to fetch lectures of a particular day but I am not getting how to link my jQuery to JavaScript

 原文  2019-03-22 12:19:26  9   1    javascript/ jquery/ html/ bootstrap-4

Question

This is a JavaScript function to get today's lectures of a chosen section of a class we have used jQuery for that. I am getting the array of today's classes using JavaScript, but how to implement this array on html file? 

 //function to get today var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; //January is 0! var yyyy = today.getFullYear(); if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } today = mm + '/' + dd + '/' + yyyy; var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; var d = new Date(today); var dayName = days[d.getDay()]; var section = 2; console.log(dayName) console.log(section) function fetchCominUp(day, sec) { if (sec === 1) { if (day === "Monday") { var classes = new Array(); classes[0] = "CG"; classes[1] = "DW"; classes[2] = "CD"; classes[3] = "CN"; return classes; } if (day === "Tuesday") { var classes = new Array(); classes[0] = "CD"; classes[1] = "CN"; classes[2] = "DW-Lab A & CG-Lab B"; classes[3] = "CG-Lab B & DW-Lab b"; return classes; } if (day === "Wednesday") { var classes = new Array(); classes[0] = "Apti"; classes[1] = "Apti"; classes[2] = "DW"; classes[3] = "CG"; return classes; } if (day === "Thursday") { var classes = new Array(); classes[0] = "IM"; classes[1] = "CN"; classes[2] = "CD"; classes[3] = "IS"; return classes; } if (day === "Friday") { var classes = new Array(); classes[0] = "DW"; classes[1] = "CG"; classes[2] = "CN-Lab A & CD-Lab B"; classes[3] = "CD-Lab B & CN-Lab B"; return classes; } if (day === "Saturday") { var classes = new Array(); classes[0] = ".NET"; classes[1] = "JAVA"; classes[2] = "NPTEL"; classes[3] = "SPorts"; return classes; } if (day === "Sunday") { var classes = new Array(); classes[0] = "Closed"; classes[1] = "Closed"; classes[2] = "Closed"; classes[3] = "Closed"; return classes; } return false; } else if (sec === 2) { if (day === "Monday") { var classes = new Array(); classes[0] = "CD"; classes[1] = "CG/WT"; classes[2] = "CN"; classes[3] = "DW"; return classes; } if (day === "Tuesday") { var classes = new Array(); classes[0] = "DW"; classes[1] = "CG/WT"; classes[2] = "CD"; classes[3] = "CN"; return classes; } if (day === "Wednesday") { var classes = new Array(); classes[0] = "IM"; classes[1] = "DW"; classes[2] = "CN-Lab A & CD-Lab B"; classes[3] = "CD-Lab A & CN-Lab B"; return classes; } if (day === "Thursday") { var classes = new Array(); classes[0] = "Apti"; classes[1] = "Apti"; classes[2] = "DW-Lab A & CG-lab B/WT-Lab(IT)"; classes[3] = "CG-Lab A & DW-Lab B"; return classes; } if (day === "Friday") { var classes = new Array(); classes[0] = "CN"; classes[1] = "CD"; classes[2] = "CG/WT"; classes[3] = "IS"; return classes; } if (day === "Saturday") { var classes = new Array(); classes[0] = ".NET"; classes[1] = "JAVA"; classes[2] = "NPTEL"; classes[3] = "SPorts"; return classes; } if (day === "Sunday") { var classes = new Array(); classes[0] = "Closed"; classes[1] = "Closed"; classes[2] = "Closed"; classes[3] = "Closed"; return classes; } return false; } } console.log(fetchCominUp(dayName, section))
 <!DOCTYPE html> <html lang="en"> <head> <title>Student Resource Portal</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="style.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <!--This is our header--> <header> <nav class="navbar navbar-expand-sm sticky-top navbar-dark bg-primary"> <div class="container-fluid"> <a href="#" class="navbar-brand"><span class="navbar-brand mb-0 h1">Csians</span></a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!--These are nav items--> <div class="collapse navbar-collapse" id="myMenu"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="index.html" class="nav-link active">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Timetable</a> </li> <li class="nav-item"> <a class="nav-link" href="syllabus.html">Syllabus</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Notes</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contribute</a> </li> </ul> </div> </div> </nav> </header> <!--today's time table--> <!--we have to use card and make table here--> <main> <div class="container"> <div class="card text-center"> <div class="card-header"> <h5>Today's Classes</h5> </div> <p> <button id="cse1" class="btn col-sm-3 col-md-3 btn-primary" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="">CSE A</button> <button id="cse2" class="btn col-sm-3 col-md-3 btn-primary" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="">CSE B</button> </p> <div class="row"> <div class="col"> <!--Here i want my section A lectures--> </div> <div class="col"> <!--Here i want my section B lectures--> </div> </div> </div> </div> </main> <!--Footer--> <!-- Footer --> <footer class="page-footer fixed-bottom font-small bg-primary"> <!-- Copyright --> <div class="footer-copyright text-center py-3"><span style="color:white">Handcrafted with </span> <i class="fas fa-music"></i><span style="color:white"> and </span> <i class="fas fa-laptop-code"></i> </div> <!-- Copyright --> </footer> <!-- Footer --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="/public/main.js"></script> <script type="text/javascript"> $("#cse1").click(function() { fetchCominUp(1); }) $("#cse2").click(function() { fetchCominUp(2); }) </script> </body> </html>

This image is of my html code of the section where I want to show lectures of today - please help me how to show the classes using javascript function

jQuery

Below is my jQuery function to fetch the timeTable of cse1 when we click on cse1 button same for cse2:

<script type="text/javascript">
    $("#cse1").click(function() {
        fetchCominUp(1);
    })
    $("#cse2").click(function() {
        fetchCominUp(2);
    })
</script>

1 answers

solution1
 0 ACCPTED  2019-03-22 15:56:08

Here is a jsfiddle with your code and fixes to get what you are trying to achieve.

Here is a link to jsfiddle click this link to jsfiddle

I have changed some of your code in html and javascript. Works fine now.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I run code I have written in JavaScript? How will I write special characters written in my HTML code in Javascript? Why am I getting a [object HTMLInputElement] in my Javascript code? I am having troubles with my gaming character code on JavaScript and jquery I am currently removing jquery from my code and I am not able to convert this Jquery to Javascript How do I find particular Javascript within my code How can I have refresh page link/button inside my JavaScript code? Why am I getting errors with my JavaScript? I am stuck with this javascript/jquery code What am I missing in my JavaScript code?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM