こんにちは。
今jsの勉強をしているのですが、
下記のようなプログラムを書いてエラーがでます。
js
1var touchList = aplication.getElementsByTagName('li').getElementsByTagName('img');
getElementsBytagNameを二回使うことはできないのでしょうか?
aplicationはulのidで、その下のliのさらに下のimgを取り出したいです。
何かよ方法はないでしょうか?
---追加--
すみません。
全体のコードを記載いたします。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ADOBEヘルプ</title> 6 <style> 7 body{ 8 padding: 0; 9 margin: 0; 10 } 11 h1{ 12 text-align: center; 13 } 14 h2{ 15 margin: 0; 16 padding: 0; 17 } 18 .explain{background-color: #000} 19 li{ 20 list-style: none; 21 } 22 .mark { 23 height: 330px; 24 } 25 .window{ 26 width: 200px; 27 margin: 0 auto; 28 overflow: hidden; 29 } 30 #aplication{ 31 display: flex; 32 padding: 0; 33 } 34 #aplication li { 35 margin-left: 20px; 36 } 37 #aplication li:first-child{ 38 margin-left: -440px; 39 } 40 #aplication li img{ 41 width: 200px; 42 height:200px; 43 } 44 #back img,#next img{ 45 margin: 50% 0; 46 } 47 .slide{ 48 display: flex; 49 } 50 .next{ 51 transition: .8s; 52 transform: translateX(-220px); 53 } 54 .back{ 55 transition: .8s; 56 transform: translateX(220px); 57 } 58 .explain{ 59 padding: 30px; 60 box-sizing: border-box; 61 } 62 .explain_tab{ 63 background-color: #fff; 64 border-radius: 10px; 65 padding: 15px; 66 box-sizing: border-box; 67 display: none; 68 transition: .4s; 69 } 70 .explain_tab h2{ 71 text-align: center; 72 } 73 .explain_tab.active{ 74 opacity: 0; 75 display: block; 76 } 77 .explain_tab.sol{ 78 opacity: 1; 79 transition: .4s; 80 } 81 .explain_tab.op{ 82 transition: .4s; 83 opacity: 0; 84 } 85 86 /*--説明部分--*/ 87 .explain_tab ul { 88 margin-top: 30px; 89 padding: 0; 90 } 91 .explain_tab h2{ 92 margin-top: 20px; 93 } 94 .button{ 95 margin-bottom: 0px; 96 font-size: 18px; 97 font-weight: bold; 98 text-align: center; 99 padding: 0; 100 background-color: #ddd; 101 padding: 15px; 102 border-radius: 10px; 103 border: 1px #000 solid; 104 box-sizing: border-box; 105 text-decoration:underline; 106 } 107 .explain_contents{ 108 padding: 20px 50px 0; 109 } 110 .explain_contents.active{ 111 112 } 113 .ac{ 114 height: 59px; 115 overflow:hidden; 116 transition: .8s; 117 } 118 .button:hover{ 119 cursor: pointer; 120 } 121 .listMark li{ 122 list-style: disc; 123 } 124 /*--説明部分end--*/ 125 </style> 126 </head> 127 <body> 128 <main> 129 <div class="mark"> 130 <h1>ADOBEヘルプ</h1> 131 <div class="slide" id="slide"> 132 <div id="back"> 133 <img src="images/back.png" alt="back"> 134 </div> 135 <div id="middle"> 136 <div class="window"> 137 <ul id="aplication"> 138 139 </ul> 140 </div> 141 </div> 142 143 <div id="next"> 144 <img src="images/next.png" alt="next"> 145 </div> 146 </div> 147 148 </div> 149 150 151 152 </main> 153 <script> 154 (function () { 155 var apli = 156 [ 157 {'img':'images/ps_cc_app_RGB.svg','nunber':'tab_ps'}, 158 {'img':'images/ai_cc_app_RGB.svg','nunber':'tab_ai'}, 159 {'img':'images/Lr_cc_app_noshadow_RGB.svg','nunber':'tab_lr'}, 160 {'img':'images/st_app_RGB.svg','nunber':'tab_st'}, 161 {'img':'images/id_cc_app_RGB.svg','nunber':'tab_id'} 162 ]; 163 164 var aplication = document.getElementById('aplication'); 165 var box = [];//変数の並びをかえるための一時格納ボックス 166 var currentApli;//現在選択されているアプリケーションを記載しておく 167 168 var sw = false; 169 170 //アプリ画像をドラッグした時の挙動 171 172 var touchList = aplication.getElementsByTagName('li'); 173 console.log(touchList); 174 for (var i = 0; i < touchList.length; i++) { 175 touchList[i].getElementsByTagName('img'); 176 177 touchList[i].addEventListener('mousedown',function () { 178 console.log('ok'); 179 }) 180 } 181 //変数に入れた画像データをリストに格納し表示 182 183 //スライド部分の配置をずらす(配列の先頭を出す) 184 for (var i = 0; i < 2; i++) { 185 box.push(apli.pop()); 186 apli.unshift(box.shift()); 187 } 188 189 for (var i = 0; i < 5; i++) { 190 var li = document.createElement("li"); 191 var img = document.createElement("img"); 192 li.dataset.id = apli[i].nunber; 193 var imagebox = aplication.appendChild(li).appendChild(img); 194 imagebox.src = apli[i].img; 195 } 196 197 198 //スライド部分のwidth調整、explain部分の高さ調整 199 window.onresize = ws; 200 function ws() { 201 var w = window.innerWidth; 202 document.getElementById('slide').style.width = w + "px"; 203 document.getElementById('middle').style.width = w - 200 + "px"; 204 var h = window.innerHeight; 205 document.getElementsByClassName('explain')[0].style.minHeight = h - 360 + 'px'; 206 } 207 ws(); 208 209 //スライド用 210 document.getElementById('next').addEventListener('click',function functionName() { 211 if (sw === false) { 212 next(); 213 changeTab(); 214 }else if (sw = true) { 215 return; 216 } 217 }); 218 document.getElementById('back').addEventListener('click',function functionName() { 219 if (sw === false) { 220 back(); 221 changeTab(); 222 }else if (sw = true) { 223 return; 224 } 225 }); 226 227 function changeTab() { 228 var deleteTab = document.getElementsByClassName('explain_tab'); 229 for (var i = 0; i < deleteTab.length; i++) { 230 if (deleteTab[i].className === 'sol active explain_tab') { 231 deleteTab[i].className = 'op active explain_tab'; 232 } 233 }; 234 setTimeout(function () { 235 for (var i = 0; i < deleteTab.length; i++) { 236 deleteTab[i].className = 'op explain_tab'; 237 document.getElementById(currentApli).className = 'op active explain_tab'; 238 }; 239 setTimeout(function () { 240 document.getElementById(currentApli).className = 'sol active explain_tab'; 241 }, 5); 242 }, 395); 243 }; 244 245 function next() { 246 sw = true; 247 aplication.className = 'next'; 248 box.push(apli.shift()); 249 apli.push(box.shift()); 250 currentApli = apli[2].nunber; 251 setTimeout(function () { 252 253 while (aplication.firstChild) { 254 aplication.removeChild(aplication.firstChild); 255 }; 256 aplication.className = ''; 257 for (var i = 0; i < 5; i++) { 258 var li = document.createElement("li"); 259 var img = document.createElement("img"); 260 var imagebox = aplication.appendChild(li).appendChild(img); 261 imagebox.src = apli[i].img; 262 } 263 sw = false; 264 }, 800); 265 initButton(); 266 }; 267 function back() { 268 sw = true; 269 aplication.className = 'back'; 270 box.push(apli.pop()); 271 apli.unshift(box.shift()); 272 currentApli = apli[2].nunber; 273 274 setTimeout(function () { 275 276 while (aplication.firstChild) { 277 aplication.removeChild(aplication.firstChild); 278 }; 279 aplication.className = ''; 280 for (var i = 0; i < 5; i++) { 281 var li = document.createElement("li"); 282 var img = document.createElement("img"); 283 var imagebox = aplication.appendChild(li).appendChild(img); 284 imagebox.src = apli[i].img; 285 } 286 sw = false; 287 }, 800); 288 initButton(); 289 }; 290 291 292 var buttonL = document.getElementsByClassName('button'); 293 var cont = document.getElementsByClassName('explain_contents'); 294 var ac = document.getElementsByClassName('ac'); 295 var acSw = [] ;//アコーディオン開閉のスイッチ 296 297 for (var i = 0; i < buttonL.length; i++) { 298 acSw.push(false); 299 clickButton(i); 300 } 301 function clickButton(n) { 302 buttonL[n].addEventListener('click',function () { 303 if (acSw[n] === false) { 304 var contH = cont[n].clientHeight; 305 var acH = ac[n].clientHeight; 306 ac[n].style.height = acH + contH + 'px'; 307 acSw[n] = true; 308 }else if (acSw[n] === true) { 309 ac[n].style.height = '59px'; 310 acSw[n] = false; 311 } 312 }) 313 }; 314 function initButton() { 315 for (var i = 0; i < buttonL.length; i++) { 316 ac[i].style.height = '59px'; 317 acSw[i] = false; 318 }; 319 }; 320 })(); 321 322 </script> 323 </body> 324</html>
回答4件
あなたの回答
tips
プレビュー