1
JavaScriptの機能は私が私と一緒に負担してください合計初心者です
$(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>を実行してはいけません。 JSを学んでいるときに書いたこの小さなアプリがあります。ボタンクリックで呼び出される人名と年齢のテーブルを作成する関数が含まれています。 次に、表にクラスを追加する別の関数があります。この関数は、実際にCSSによって変更（表示）され、別のボタンのクリックによって呼び出されます。 すべてのJSを$（document）.ready（）{....}にカプセル化されたファイルに入れました。 私が気づくのは、関数が実行されないことです。 それから、（ドキュメント）.ready（）{....}のない別のJSファイルに関数を追加し、それらの関数が期待通りに実行されます。 私はwindow.onload（）{.....}でも同じことを試みましたが、どちらも実行されません。 誰かがこれでいくつかの光を当てることができますか？ ここにファイルを添付することはできますが、上にコードを貼り付けることはできません。ボタンのクリックは機能しません。しかし、関数を別のファイルにコピーしてmain_funs.jsという名前を付けると、コードは機能します。 申し訳ありませんが私が持っている問題を伝えるためにしましたが、明らかでない場合は私に知らせてください、私はあなたにコードファイルを送ることができます。あなたは$(document).ready()ハンドラの関数を定義しているので、 おかげ
main.htmlを
同じバージョンのjQueryを2回ロードしようとしています。文書の前にある '