TypeError: Tankimg.Style es indefinido -- javascript campo con html camp Relacionados El problema

TypeError: tankImg.style is undefined


0
vote

problema

Español

Esta página web debe mostrar una lista de tanques en 'Vista previa' y luego puedo elegir y GT; Un elemento de este catálogo por el botón del mouse. Después de este NewDOC (), debe devolver la página con los detalles del tanque cuando hago clic en alguien elemento de la lista en la consola aparece el mensaje

"TypeError: Tankimg.Style es indefinido", Firefox

  //app.js     function newDoc(event) {         alert(this.className)         var root = document.getElementById('root'),             originTree = root.innerHTML;         root.innerHTML = ''      //create all needed element     var previewBox1 = document.createElement('div'),         previewBox2 = document.createElement('div'),         previewCommon = document.createElement('div') ,         tankImg = document.createElement('div'),         previewLabel = document.createElement('div'),         backToList = document.createElement('div'),         table = document.createElement('div'),         previewBox1Flag = document.createElement('div'),         previewBox1Model = document.createElement('div'),         previewBox1Level =   document.createElement('div');      // find tank object by Model name     for (let i = 0; i < tanks.length; ++i){         if (tanks[i].model === this.className){             var clickedObj = tanks[i];             break;         }     }   // fill by data object     tankImg.style.backgroundImage = "url(" + clickedObj.preview + ")"; //in previous line is my trouble!     previewBox1Flag.style.backgroundImage = "url(" +  clickedObj["country_image"] + ")";     previewBox1Level.innerHTML = "(level " + clickedObj.level + ")";     previewBox1Model.innerHTML = clickedObj.model.toUpperCase();     backToList.innerHTML = 'Back to list view';     previewLabel.innerHTML = 'Preview';     table.innerHTML = 'Characteristic';  //    to construck all the element      previewCommon.appendChild(previewBox1Flag);     previewCommon.appendChild(previewBox1Model);     previewCommon.appendChild(previewBox1Level);      previewBox1.appendChild(previewCommon);     previewBox1.appendChild(previewLabel);     previewBox1.appendChild(tankImg);     previewBox1.appendChild(backToList);     previewBox2.appendChild(table);     root.appendChild(previewBox1);     root.appendChild(previewBox2);   }  function makePreviewObject(list){     var rootDiv = document.getElementById('root'),         newUl = document.createElement('ul');     for (let i = 0;i < list.length; ++i){          var nextLi = document.createElement('li'),             newImgDiv = document.createElement('div'),             newCommonDiv = document.createElement('div'),             divForFlag = document.createElement('div'),             divForLevel = document.createElement('div'),             divForModel = document.createElement('div');          nextLi.className = list[i].model;         newImgDiv.className = 'newImgDiv';         newCommonDiv.className = 'newCommonDiv';         divForFlag.className = 'divForFlag';         newImgDiv.style.backgroundImage = 'url(' + list[i].preview + ')';         divForFlag.style.backgroundImage = 'url(' + list[i]['country_image']  + ')';         divForLevel.innerHTML = list[i].level;         divForModel.innerHTML = lengthOffSet(list[i].model.toUpperCase());          newCommonDiv.appendChild(divForFlag);         newCommonDiv.appendChild(divForLevel);         newCommonDiv.appendChild(divForModel);          nextLi.addEventListener('click', newDoc);         nextLi.appendChild(newImgDiv);         nextLi.appendChild(newCommonDiv);          newUl.appendChild(nextLi);          rootDiv.appendChild(newUl);      }  }  function lengthOffSet(string){     if (string.length < 14){         return string     } else{         return string.substr(0, 11) + '...'     } }  makePreviewObject(tanks);   //tanks.js var tanks = [   {     model: "Object 140",     preview: "images/tanks/object_140.png",     country: "ussr",     country_image: "images/countries/ussr.png",     level: 10,     details: {       damage: 420,       breoning: 264,       attack_speed: 9.09,       time_of_targeting: 2.1,       ammunition: 50     }   },   {     model: "t-62a",     preview: "images/tanks/t62a.png",     country: "ussr",     country_image: "images/countries/ussr.png",     level: 10,     details: {       damage: 630,       breoning: 246,       attack_speed: 9.09,       time_of_targeting: 2,       ammunition: 50     }   } ]    //index.html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <link rel="stylesheet" href="styles.css"> </head> <body>   <div id="root"></div>    <script src="tanks.js"></script>   <script src="app.js"></script>  </body> </html>   

¿Qué está mal?

Original en ingles

This web page should show a list of tanks in 'preview' and then I can choose > one element from this catalog by mouse click. After this newDoc() shoul return the page with tank details when I click on someone element from list in console appears message

"TypeError: tankImg.style is undefined", Firefox

//app.js     function newDoc(event) {         alert(this.className)         var root = document.getElementById('root'),             originTree = root.innerHTML;         root.innerHTML = ''      //create all needed element     var previewBox1 = document.createElement('div'),         previewBox2 = document.createElement('div'),         previewCommon = document.createElement('div') ,         tankImg = document.createElement('div'),         previewLabel = document.createElement('div'),         backToList = document.createElement('div'),         table = document.createElement('div'),         previewBox1Flag = document.createElement('div'),         previewBox1Model = document.createElement('div'),         previewBox1Level =   document.createElement('div');      // find tank object by Model name     for (let i = 0; i < tanks.length; ++i){         if (tanks[i].model === this.className){             var clickedObj = tanks[i];             break;         }     }   // fill by data object     tankImg.style.backgroundImage = "url(" + clickedObj.preview + ")"; //in previous line is my trouble!     previewBox1Flag.style.backgroundImage = "url(" +  clickedObj["country_image"] + ")";     previewBox1Level.innerHTML = "(level " + clickedObj.level + ")";     previewBox1Model.innerHTML = clickedObj.model.toUpperCase();     backToList.innerHTML = 'Back to list view';     previewLabel.innerHTML = 'Preview';     table.innerHTML = 'Characteristic';  //    to construck all the element      previewCommon.appendChild(previewBox1Flag);     previewCommon.appendChild(previewBox1Model);     previewCommon.appendChild(previewBox1Level);      previewBox1.appendChild(previewCommon);     previewBox1.appendChild(previewLabel);     previewBox1.appendChild(tankImg);     previewBox1.appendChild(backToList);     previewBox2.appendChild(table);     root.appendChild(previewBox1);     root.appendChild(previewBox2);   }  function makePreviewObject(list){     var rootDiv = document.getElementById('root'),         newUl = document.createElement('ul');     for (let i = 0;i < list.length; ++i){          var nextLi = document.createElement('li'),             newImgDiv = document.createElement('div'),             newCommonDiv = document.createElement('div'),             divForFlag = document.createElement('div'),             divForLevel = document.createElement('div'),             divForModel = document.createElement('div');          nextLi.className = list[i].model;         newImgDiv.className = 'newImgDiv';         newCommonDiv.className = 'newCommonDiv';         divForFlag.className = 'divForFlag';         newImgDiv.style.backgroundImage = 'url(' + list[i].preview + ')';         divForFlag.style.backgroundImage = 'url(' + list[i]['country_image']  + ')';         divForLevel.innerHTML = list[i].level;         divForModel.innerHTML = lengthOffSet(list[i].model.toUpperCase());          newCommonDiv.appendChild(divForFlag);         newCommonDiv.appendChild(divForLevel);         newCommonDiv.appendChild(divForModel);          nextLi.addEventListener('click', newDoc);         nextLi.appendChild(newImgDiv);         nextLi.appendChild(newCommonDiv);          newUl.appendChild(nextLi);          rootDiv.appendChild(newUl);      }  }  function lengthOffSet(string){     if (string.length < 14){         return string     } else{         return string.substr(0, 11) + '...'     } }  makePreviewObject(tanks);   //tanks.js var tanks = [   {     model: "Object 140",     preview: "images/tanks/object_140.png",     country: "ussr",     country_image: "images/countries/ussr.png",     level: 10,     details: {       damage: 420,       breoning: 264,       attack_speed: 9.09,       time_of_targeting: 2.1,       ammunition: 50     }   },   {     model: "t-62a",     preview: "images/tanks/t62a.png",     country: "ussr",     country_image: "images/countries/ussr.png",     level: 10,     details: {       damage: 630,       breoning: 246,       attack_speed: 9.09,       time_of_targeting: 2,       ammunition: 50     }   } ]    //index.html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <link rel="stylesheet" href="styles.css"> </head> <body>   <div id="root"></div>    <script src="tanks.js"></script>   <script src="app.js"></script>  </body> </html> 

What is wrong ?

     
   
   

Lista de respuestas


Relacionados problema

4  ¿Cuál es el futuro de la web? Xhtml 2, html 5, o otra cosa?  ( Whats the future of the web xhtml 2 html 5 or something else ) 
Estoy confundido por la discusión y el avance de una nueva versión de HTML y una nueva versión de XHTML. ¿Son competidores? Si es así, ¿qué es lo más probable...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

635  Determinar la zona horaria de un usuario  ( Determine a users timezone ) 
¿Hay una forma estándar para que un servidor web pueda determinar la zona horaria de un usuario dentro de una página web? Tal vez de un encabezado HTTP o pa...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

273  Múltiples botones de envío en un formulario HTML  ( Multiple submit buttons in an html form ) 
Digamos que crea un asistente en un formulario HTML. Un botón se remonta, y uno avanza. Dado que el botón Atrás aparece primero en el marcado cuando presion...

80  ¿Cómo imprimo un documento HTML de un servicio web?  ( How do i print an html document from a web service ) 
Quiero imprimir HTML desde un servicio web C #. El control del navegador web está exagerado, y no funciona bien en un entorno de servicio, ni funciona bien en...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

31  ¿Cómo doy a mis sitios web un icono para iPhone?  ( How do i give my websites an icon for iphone ) 
¿Cómo configuro el icono que aparece adecuado en el iPhone para los sitios web que he creado? ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos