$(document).ready(function(){
'use strict';
console.log('main.js loaded');
\t \t
//showtable();
function showtable() {
console.log("We are in the showtable function in main.js");
let people = [
{name:"Mohinder", gender: "Male", Age: 57},
{name:"Rekha", gender: "Female", Age: 58},
{name:"Karan", gender: "Male", Age: 30},
{name:"Angad", gender: "Male", Age: 20},
{name:"Reba", gender: "Female", Age: 10}
];
var theDiv = document.getElementById("people");
var tableString = "";
tableString += "<table border=1 id='peopleTable' >";
tableString += "<tr class='hdr'><td>Name</td><td>Age</td></tr>";
for (var x = 0; x < people.length; x += 1)
tableString += "<tr><td>" + people[x].name + "</td><td>" + people[x].Age + "</td></tr>";
tableString += "</table>";
theDiv.innerHTML += tableString;
};
function frontAndCenter() {
console.log("We are in the frontAndCenter function in main.js");
var rtnval = '' ;
var x = document.getElementsByTagName('table');
if (x[0].className)
\t x[0].className = "raise";
else
x[0].className+="raise";
\t return rtnval;
}
});/* Styles go here */
.raise{
\t box-shadow: 10px 10px 10px green ;
\t margin: auto ;
}
#mainCanvas{
\t width: 400px;
\t height:400px;
\t border: solid 1px black;
}
.hdr {
background-color:cyan;
}
td {
padding:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
\t <head>
<title>Learning JS</title>
\t \t <link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
\t </head>
\t
\t <body>
\t \t <h1> My first application! </h1>
\t \t <p id="people"></p>
<button id='peopleBtn' onclick="showtable();">Show People Table</button>
<button id='daBtn' onclick="frontAndCenter();">Click Me</button>
\t \t <script src="main_funs.js"></script>
\t \t <script src="main.js"></script>
\t \t <script src="main2.js"></script>
\t </body>
</html>Tam bir acemi yüzden benimle ayı lütfen duyuyorum yürütmek yok. JS öğrenirken yazdığım bu küçük uygulamaya sahibim. Düğme tıklamasıyla çağrılan kişi adlarını ve yaşlarını içeren bir tablo oluşturmak için bir işlev içerir. Daha sonra tabloya bir sınıf ekleyen ve ardından CSS tarafından değiştirilen (ekrana göre) bir sınıf ekleyen başka bir işlev vardır ve bu başka bir düğmenin tıklamasıyla da çağrılır. Tüm JS'leri $ (document) .ready() {....} içinde iĢlevler iĢlemediğimi fark ettiğim bir dosyaya koydum. Daha sonra işlevleri (document) .ready() {....} olmadan başka bir JS dosyasına ekledim ve bu işlevler beklendiği gibi yürütülür. Aynı şeyi window.onload() {.....} ile de denedim ve onlar da çalışmazlar. Biri buna biraz ışık tutabilir mi lütfen? Dosyaları buraya ekleyip ekleyemiyorum, ancak kodun üzerine yapıştırılmış olup olmadığından emin değilim. Düğme tıklamaları çalışmayacak. Ancak işlevleri başka bir dosyaya kopyalarsanız ve main_funs.js adını yazarsanız kod çalışır. Maalesef, sahip olduğum sorunu iletmek için elimden geleni yaptım, ancak açık değilse lütfen bana bildirin ve size kod dosyalarını gönderebilirim. Teşekkür
main.html
Aynı jQuery sürümünü iki kez yüklemeye çalışıyorsunuz. Belgenizden önceki '