JavaScriptで、別HTMLを取り込み、指定の位置に表示させることができています。
しかし、読み込んだ別ファイルのIDなどの要素に対し、スクリプトなどを作動させることはできずにいます。
例として、簡単なスクリプト組んでみました。
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>JavaScriptテスト</title> 6<script type="text/javascript" src="js/main.js"></script> 7<link href="cs/main.css" rel="stylesheet" type="text/css"> 8</head> 9 10<body> 11<div id="cl1"><img src="img/number3_1.png" /></div> 12<div id="cl2"><img src="img/number3_22.png" /></div> 13<div id="cl3"><img src="img/number3_33.png" /></div> 14<div id="cl4"><img src="img/number3_44.png" /></div> 15<div id="ans"></div> 16 17 18</body> 19</html>
JavaScript
1window.onload = function(){ 2 document.getElementById('cl1').onclick = function(){ 3 4 var str = document.createTextNode("1が押された"); 5 document.getElementById('ans').appendChild(str); 6 7 }; 8 9 document.getElementById('cl2').onclick = function(){ 10 11 var str = document.createTextNode("2が押された"); 12 document.getElementById('ans').appendChild(str); 13 14 }; 15 16 document.getElementById('cl3').onclick = function(){ 17 18 var str = document.createTextNode("3が押された"); 19 document.getElementById('ans').appendChild(str); 20 21 }; 22 23 document.getElementById('cl4').onclick = function(){ 24 25 var str = document.createTextNode("4が押された"); 26 document.getElementById('ans').appendChild(str); 27 28 }; 29 30 31};
CSS
1div#cl1 { 2 width: 36px; 3 height: 36px; 4 float: left; 5} 6div#cl2 { 7 width: 36px; 8 height: 36px; 9 float: left; 10} 11div#cl3 { 12 width: 36px; 13 height: 36px; 14 float: left; 15} 16div#cl4 { 17 width: 36px; 18 height: 36px; 19 float: left; 20 21}
このコードを実行すると、1の画像があるところをクリックすると、1が押された とDIV ans にテキストが追加されます。
しかし、このHTMLをJavaScriptで他のHTMLに読み込ませると、うまく動作しなくなってしまいます。
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>JavaScriptテスト</title> 6<script type="text/javascript" src="js/test.js"></script> 7<link href="cs/main.css" rel="stylesheet" type="text/css"> 8</head> 9 10<body> 11<div id="inst"></div> 12 13</body> 14</html> 15
HTML
1<div id="cl1"><img src="img/number3_1.png" /></div> 2<div id="cl2"><img src="img/number3_22.png" /></div> 3<div id="cl3"><img src="img/number3_33.png" /></div> 4<div id="cl4"><img src="img/number3_44.png" /></div> 5<div id="ans"></div> 6
JavaScript
1// JavaScript Document 2window.onload = function(){ 3 4 var httpObj1 = new XMLHttpRequest(); 5 httpObj1.open("GET", "test02l.html", true); 6 httpObj1.onreadystatechange = function() { 7 if (httpObj1.readyState == 4) { 8 var readObject01 = httpObj1.responseText; 9 document.getElementById("inst").innerHTML = readObject01; 10 } 11 } 12 httpObj1.send(''); 13 14 15 document.getElementById('cl1').onclick = function(){ 16 17 var str = document.createTextNode("1が押された"); 18 document.getElementById('ans').appendChild(str); 19 20 }; 21 22 document.getElementById('cl2').onclick = function(){ 23 24 var str = document.createTextNode("2が押された"); 25 document.getElementById('ans').appendChild(str); 26 27 }; 28 29 document.getElementById('cl3').onclick = function(){ 30 31 var str = document.createTextNode("3が押された"); 32 document.getElementById('ans').appendChild(str); 33 34 }; 35 36 document.getElementById('cl4').onclick = function(){ 37 38 var str = document.createTextNode("4が押された"); 39 document.getElementById('ans').appendChild(str); 40 41 }; 42 43 44};
CSS
1div#cl1 { 2 width: 36px; 3 height: 36px; 4 float: left; 5} 6div#cl2 { 7 width: 36px; 8 height: 36px; 9 float: left; 10} 11div#cl3 { 12 width: 36px; 13 height: 36px; 14 float: left; 15} 16div#cl4 { 17 width: 36px; 18 height: 36px; 19 float: left; 20 21}
最初のXMLHttpRequestによって、2つ目のHTMLの内容が、<div id="inst"></div>の間に挿入されるところまでは期待通りの動作です。
しかし、1,2,3,4が縦に並ぶところから、IDを区別しているCSSも効いておりません。
当然、数字ボタンを押しても、JavaScriptに指定した、テキストを追加する動作も発動しません。
このような形で、2つ目のhtmlに記載されたIDやclassで、CSSやJavaScriptを効かせる方法がありましたら、教えてください。
目的としては、2つ目のファイルのみを別作業者に作業させて、スクリプトやCSSを触らせる事なく、HTMLを修正したいという内容になります。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー