javascript - document.getElementById ("").innerHTML= 不起作用(但只是部分起作用)

标签 javascript

看，我花了几个小时试图弄清楚发生了什么，但由于某种原因， document.getElementById("lvlCostUrb").innerHTML= 继续运行，但没有显示在网站 4 个表格的最后一个中。
-我已经将 id='s 放入 br's 中，因为我以前一直使用过 p's，我尝试更改它。不工作。
-我尝试更改 js 上 id 的顺序，但不起作用。
-据我所知，sintaxix 很好。
-我尝试更改 document.getElementById("lvlCostUrb").innerHTML="MESSAGE";通过一些简单的东西，比如“嗨”。不工作...
所以我真的没有主意了......
我希望你能帮助我，谢谢你的时间。
顺便说一句，我正在尝试构建一款太空策略游戏XD!
HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index</title>
<link href="gameCSS.css" rel="stylesheet" type="text/css" />
</head>
<script src="PlanetAndStructures.js" type="text/javascript">

</script>
<body onload="show()" >


<p>&nbsp;</p>
<table width="800" border="1">
  <tr>
    <th scope="col">TGC*</th>
    <th scope="col">Radioactives</th>
    <th scope="col">Organic</th>
    <th scope="col">Metall</th>
    <th scope="col">Manpower</th>
    <th scope="col">Food</th>
    <th scope="col">Militar Power</th>
    <th scope="col">Economy</th>
    <th scope="col">Lvl</th>
  </tr>
  <tr>
    <td><p id="tottgc">Loading</p></td>
    <td><p id="totRadioactives">Loading</P></td>
    <td><p id="totOrganic">Loading</p></td>
    <td><p id="totMetal">Loading</p></td>
    <td><p id="Manpower">Loading</p></td>
    <td><p id="Food">Loading</p></td>
    <td><p id="MS">Loading</p></td>
    <td><p id="ES">Loading</p></td>
    <td><p id="Lvl">Loading</p></td>
  </tr>
</table>
<p>Planet geology and info:</p>
<table width="919" border="1">
  <tr>
    <td colspan="7" bgcolor="#00FF99" class="cent">Info</td>
  </tr>
  <tr>
    <td width="128" bgcolor="#00FF99" class="cent">Gravity</td>
    <td width="152" bgcolor="#00FF99" class="cent">Natural ecosistem</td>
    <td width="142" bgcolor="#00FF99" class="cent">Radioactive</td>
    <td width="111" bgcolor="#00FF99" class="cent">Metal</td>
    <td width="113" bgcolor="#00FF99" class="cent">Organic</td>
    <td width="113" bgcolor="#00FF99" class="cent">Area</td>
    <td width="114" bgcolor="#00FF99" class="cent">Solar</td>
  </tr>
  <tr>
    <td bgcolor="#C6FFC6" class="cent"><p id="grav">?</p></td>
    <td bgcolor="#C6FFC6" class="cent"><p id="natEc">?</p></td>
    <td bgcolor="#C6FFC6" class="cent"><p id="radio">?</p></td>
    <td bgcolor="#C6FFC6" class="cent"><p id="metal">?</p></td>
    <td bgcolor="#C6FFC6" class="cent"><p id="organ">?</p></td>
    <td bgcolor="#C6FFC6" class="cent"><p id="Area">?</p></td>
    <td height="23" bgcolor="#C6FFC6" class="cent"><p id="solar">?</p></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>Planet indexes </p>
<table width="800" border="1">
  <tr>
    <td colspan="7" bgcolor="#FFFF99" class="cent">Indexes</td>
    <td colspan="6" bgcolor="#FF6600" class="cent">Resource production</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99" class="cent">Fuel</td>
    <td bgcolor="#FFFF99" class="cent">Industry</td>
    <td bgcolor="#FFFF99" class="cent">Ecosistem</td>
    <td bgcolor="#FFFF99" class="cent">Research</td>
    <td bgcolor="#FFFF99" class="cent">Anarchy</td>
    <td bgcolor="#FFFF99" class="cent">Production</td>
    <td bgcolor="#FFFF99" class="cent">Construction</td>
    <td bgcolor="#FF6600" class="cent">Food</td>
    <td bgcolor="#FF6600" class="cent">Radioactive</td>
    <td bgcolor="#FF6600" class="cent">Organic</td>
    <td bgcolor="#FF6600" class="cent">Metals</td>
    <td bgcolor="#FF6600" class="cent">Energy </td>
    <td bgcolor="#FF6600" class="cent">TGC's</td>
  </tr>
  <tr>
    <td height="23" bgcolor="#FFFFCE" class="cent"><p id="FI">?</p></td>
    <td bgcolor="#FFFFCE" class="cent"><p id="II">?</p></td>
    <td bgcolor="#FFFFCE" class="cent"><p id="EI">?</p></td>
    <td bgcolor="#FFFFCE" class="cent"><p id="RI">?</p></td>
    <td bgcolor="#FFFFCE" class="cent"><p id="AI">?</p></td>
    <td bgcolor="#FFFFCE" class="cent"><p id="PI">?</p></td>
    <td bgcolor="#FFFFCE" class="cent"><p id="CI">?</p></td>
    <td bgcolor="#FFC6A4" class="cent"><p id="Fp";</td>
    <td bgcolor="#FFC6A4" class="cent"><p id="Rp">?</p></td>
    <td bgcolor="#FFC6A4" class="cent"><p id="Op">?</p></td>
    <td bgcolor="#FFC6A4" class="cent"><p id="Mp">?</p></td>
    <td bgcolor="#FFC6A4" class="cent"><p id="E">?</p></td>
    <td bgcolor="#FFC6A4" class="cent"><p id="TGCp">?</p></td>
  </tr>
</table>//--------->>>>>BELOW STARTS THE THE NON WORKING TABLE!<<<<<

<p>Planet structures </p><table width="800" border="1">
  <tr>
    <td width="126" height="42">Solar plants</td>
    <td width="423">Encreases planet energy by solar index<br id="lvlCostSol">
      ?</br></td>
    <td width="151">Energy+</td>
    <td width="72"><p id="butSol"><button  onclick="SolarLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Plutonium plants</td>
    <td>Encreases planet energy by fuel index (needs radioactives to run)<br id="lvlCostPlut">?</br></td>
    <td><p>Energy++; radioactives-</p>
    <p>Ecosystem --</p></td>
    <td><p id="butPlut"><button  onclick="plutonLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td height="46">Mines</td>
    <td>Encreases planet resource mining by industry index<br id="lvlCostMin">?</br></td>
    <td><p>[Metal, Organic, Radioactive ]+;<br />
    Ecosystem--</p></td>
    <td><p id="butMin"><button  onclick="minesLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Urbanitzations</td>
    <td>Encreases planet manpower growth by industry index<br id="lvlCostUrb">?</br></td>
    <td>Manpower + ;Ecosystem-</td>
    <td><p id="butUrb"><button  onclick="UrbanLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Storage Facilities</td>
    <td>Encreases planet resource storages by industry index.<br id="lvlCostStor">?</br></td>
    <td>Estorage+</td>
    <td><p id="butStor"><button  onclick="storageLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td height="51">Food productors</td>
    <td>Encreases food production by ecosistem Index <br id="lvlCostFood">?</br></td>
    <td>Food +</td>
    <td><p id="butFood"><button  onclick="foodProdLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>General Factories</td>
    <td>Encreases Industry and construction Index<br id="lvlCostFac">?</br></td>
    <td>Industry+; Construction +, Anarchy +;</td>
    <td><p id="butInd"><button  onclick="industryLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Markets</td>
    <td>Encreases TGC production<br id="lvlCostMar">?</br></td>
    <td>TGC+</td>
    <td><p id="butMark"><button  onclick="marketLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Space industries</td>
    <td>Encreases  production Index.<br id="lvlCostSpc">?</br></td>
    <td>Production +</td>
    <td><p id="butSpaInd"><button  onclick="spaceIndLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Ecosistem modulators</td>
    <td>encreases Ecosistem Index.<br id="lvlCostEco">?</br></td>
    <td>Ecosystem ++</td>
    <td><p id="butEco"><button  onclick="ecoModLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td height="23">Artificial nutrishment</td>
    <td>encreases food production by research and industrial Index.<br id="lvlCostArtF">?</br></td>
    <td>Food ++; Anarchy +</td>
    <td><p id="butArtNut"><button  onclick="artNutLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Order centers
    </td>
    <td>Decreases Anarchy Index.<br id="lvlCostOrd">?</br></td>
    <td>Anarchy --</td>
    <td><p id="butOrd"><button  onclick="OrderLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Particle accelerators</td>
    <td>produces radioactive materials <br id="lvlCostPart">?</br></td>
    <td>Fuel ++, Ecosystem-</td>
    <td><p id="butPart"><button  onclick="particleLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Geomorph</td>
    <td>increases usable area<br id="lvlCostGeoM">?</br></td>
    <td>Area+, Ecosystem -</td>
    <td><p id="butGeo"><button  onclick="geomorphLvl+ ()">Upgrade</button></p></td>
  </tr>
  <tr>
    <td>Science Investments</td>
    <td>Increase research index<br id="lvlCostRes">?</br></td>
    <td>Research+</td>
    <td><p id="butRes"><button onclick="researchLvl+ ()">Upgrade</button></p></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>*:Trans-Galactic Crown (money).</p>
<p id="Metal"></p>
<p>&nbsp;</p>
</body>
</html>

好的，这是 .js:

//PLANET UNMOBILE STATISTICS:
var plaMetal=Math.floor((Math.random()*10)+3);
var plaArea =Math.floor((Math.random()*500)+50);
var plaGrav =Math.floor((Math.random()*8)+3);
var plaEco  =Math.floor((Math.random()*71)+30);
var plaRad  =Math.floor((Math.random()*10)+1);
var plaOrg  =Math.floor((Math.random()*10)+4);
var plaSol  =Math.floor((Math.random()*250)+50);
//STRUCTURE LEVELS;;
var artifNoutrishmentLvl=0;
var ecoModulatorsLvl=0;
var foodProductorsLvl=1;
var genFactoiesLvl=1;
var geomorphLvl=0;
var marketlvl=1;
var minesLvl=1;
var orderCenterLvl=0;
var particlesLvl=0;
var plutlvl=0;
var scienceInvestLvl=0;
var solarPlantsLvl=0;
var spcIndustriesLvl=0;
var storagelvl=0;
var urbanitzationLvl=1;

//OTHERS
var buildings=0;
var shipProd=0;
//INDEXES:
var industryI=((genFactoiesLvl*3)+(particlesLvl+urbanitzationLvl/2))/4;
var fuelI= (industryI + urbanitzationLvl + particlesLvl)/4;
var ecosistemI= plaEco-(plutlvl*3)-(minesLvl*2)- urbanitzationLvl-particlesLvl-geomorphLvl+(ecoModulatorsLvl*4);
var researchI=scienceInvestLvl*5;
var anarchyI=(genFactoiesLvl*2)+ (artifNoutrishmentLvl*3) +urbanitzationLvl-(orderCenterLvl*4);
var Production=(genFactoiesLvl*2)+(spcIndustriesLvl*4);
var constructionI=(genFactoiesLvl*5);

//RESOURCE PRODUCTION:
var energy= Math.round(solarE + plutoniumE - buildings - shipProd);
var solarE =Math.round((plaSol*solarPlantsLvl)/10)+5;
var plutoniumE=Math.round((plutlvl*fuelI)/3)+10;

var foodPerSecond=(Math.round(foodProductorsLvl*plaEco)/20)+ artifNoutrishmentLvl*10 ;
var radioactive =Math.round(((minesLvl*plaRad)+(particlesLvl*industryI))/12);
var organics=Math.round((minesLvl*plaOrg)/10);
var metals=Math.round((minesLvl*plaMetal)/10);
var tgcs =Math.round((marketlvl*3)+industryI+urbanitzationLvl)/2;
var manpower =Math.round((urbanitzationLvl*industryI)/10);
var food=0-manpower;
var energy= Math.round(solarE + plutoniumE - buildings - shipProd);
//COSTS:-------->>> THIS ARE THE VARIABLES RELATED TO THE PROBLEM.
//Metal
var artifNoutMCost= Math.round(((artifNoutrishmentLvl^2)/4)*200)+500;
var ecoModulatorsMCost= Math.round(((ecoModulatorsLvl^2)/2)*350)+80;
var foodProductorsMCost= Math.round(((foodProductorsLvl^2)/20)*15)+25;
var genFactoiesMCost= Math.round(((genFactoiesLvl^3)/13)*50)+50;
var geomorphMCost= Math.round(((geomorphLvl^2)/5)*250)+500;
var marketMCost= Math.round(((marketLvl^2)/10)*45)+54;
var minesMCost= Math.round(((minesLvl^3)/20)*60)+45;
var orderCenterMCost= Math.round(((orderCenterLvl^2)/10)*25)+100;
var particlesMCost= Math.round((particlesLvl^4)*50)+550;
var plutMCost= Math.round(((plutLvl^3)/25)*12)+100;
var scienceInvestMCost= Math.round(((scienceInvestLvl^2)/10)*25)+55;
var solarPlantsMCost= Math.round(((solarPlantsLvl^2)/10)*20)+40;
var spcIndustriesMCost= Math.round(((spcIndustriesLvl^3)/3)*55)+250;
var storageMCost= Math.round(((storageLvl^2)/10)*12)+ 160;
var urbanitzationMCost= Math.round(((urbanitzationLvl^2)/12)*25)+45;
//ORGANIC
var artifNoutOCost= Math.round(((artifNoutrishmentLvl^2)/4)*200)+500;
var ecoModulatorsOCost= Math.round(((ecoModulatorsLvl^2)/2)*350)+80;
var foodProductorsOCost= Math.round(((foodProductorsLvl^2)/20)*15)+25;
var genFactoiesOCost= Math.round(((genFactoiesLvl^3)/13)*50)+50;
var geomorphOCost= Math.round(((geomorphLvl^2)/5)*250)+500;
var marketOCost= Math.round(((marketLvl^2)/10)*45)+54;
var minesOCost= Math.round(((minesLvl^3)/20)*60)+45;
var orderCenterOCost= Math.round(((orderCenterLvl^2)/10)*25)+100;
var particlesOCost= Math.round((particlesLvl^4)*50)+550;
var plutOCost= Math.round(((plutLvl^3)/25)*12)+100;
var scienceInvestOCost= Math.round(((scienceInvestLvl^2)/10)*25)+55;
var solarPlantsOCost= Math.round(((solarPlantsLvl^2)/10)*20)+40;
var spcIndustriesOCost= Math.round(((spcIndustriesLvl^3)/3)*55)+250;
var storageOCost= Math.round(((storageLvl^2)/10)*12)+ 160;
var urbanitzationOCost= Math.round(((urbanitzationLvl^2)/12)*25)+45;

//RADIOACTIVES

var artifNoutRCost= Math.round(((artifNoutrishmentLvl^2)/4)*200)+500;
var ecoModulatorsRCost= Math.round(((ecoModulatorsLvl^2)/2)*350)+80;
var foodProductorsRCost= Math.round(((foodProductorsLvl^2)/20)*15)+25;
var genFactoiesRCost= Math.round(((genFactoiesLvl^3)/13)*50)+50;
var geomorphRCost= Math.round(((geomorphLvl^2)/5)*250)+500;
var marketRCost= Math.round(((marketLvl^2)/10)*45)+54;
var minesRCost= Math.round(((minesLvl^3)/20)*60)+45;
var orderCenterRCost= Math.round(((orderCenterLvl^2)/10)*25)+100;
var particlesRCost= Math.round((particlesLvl^4)*50)+550;
var plutRCost= Math.round(((plutLvl^3)/25)*12)+100;
var scienceInvestRCost= Math.round(((scienceInvestLvl^2)/10)*25)+55;
var solarPlantsRCost= Math.round(((solarPlantsLvl^2)/10)*20)+40;
var spcIndustriesRCost= Math.round(((spcIndustriesLvl^3)/3)*55)+250;
var storageRCost= Math.round(((storageLvl^2)/10)*12)+ 160;
var urbanitzationRCost= Math.round(((urbanitzationLvl^2)/12)*25)+45;






function show()
    {
        //Planet geology and info table:
document.getElementById("metal").innerHTML= plaMetal;
document.getElementById("Area").innerHTML= plaArea;
document.getElementById("grav").innerHTML= plaGrav;
document.getElementById("natEc").innerHTML= plaEco + "%";
document.getElementById("radio").innerHTML= plaRad;
document.getElementById("organ").innerHTML= plaOrg;
document.getElementById("solar").innerHTML= plaSol;
document.getElementById("Area").innerHTML= plaArea;
//Planet indexes table
document.getElementById("E").innerHTML= energy;
document.getElementById("Fp").innerHTML= food;
document.getElementById("Rp").innerHTML= radioactive;
document.getElementById("Op").innerHTML= organics;
document.getElementById("Mp").innerHTML= metals;
document.getElementById("TGCp").innerHTML= tgcs;
document.getElementById("Manpower").innerHTML= manpower;
document.getElementById("FI").innerHTML= fuelI;
document.getElementById("II").innerHTML= industryI;
document.getElementById("EI").innerHTML= ecosistemI;
document.getElementById("RI").innerHTML= researchI;
document.getElementById("AI").innerHTML= anarchyI;
document.getElementById("PI").innerHTML= Production;
document.getElementById("CI").innerHTML=constructionI;
//COSTS AND LVLS -------------------------------->>>>>>THIS IS THE NON WORKING PART!!<<
document.getElementById("lvlCostArtF").innerHTML="Current Lvl: " + artifNoutrishmentLvl + "Cost: " + artifNoutMCost + "Met; " + artifNoutOCost + "Org; " + artifNoutRCost + "Rad." ;
document.getElementById("lvlCostEco").innerHTML="Current Lvl: "+ecoModulatorsLvl+"Cost: "+ecoModulatorsMCost+"Met; "+ecoModulatorsOCost+"Org; "+ecoModulatorsRCost+"Rad.";
document.getElementById("lvlCostFood").innerHTML="Current Lvl: "+foodProductorsLvl+"Cost: "+foodProductorsMCost+"Met; "+foodProductorsOCost+"Org; "+foodProductorsRCost+"Rad.";
document.getElementById("lvlCostFac").innerHTML="Current Lvl: "+genFactoiesLvl+"Cost: "+genFactoiesMCost+"Met; "+genFactoiesOCost+"Org; "+genFactoiesRCost+"Rad.";
document.getElementById("lvlCostGeoM").innerHTML="Current Lvl: "+geomorphLvl+"Cost: "+geomorphMCost+"Met; "+geomorphOCost+"Org; "+geomorphRCost+"Rad.";
document.getElementById("lvlCostMar").innerHTML="Current Lvl: "+marketlvl+"Cost: "+marketMCost+"Met; "+marketOCost+"Org; "+marketRCost+"Rad.";
document.getElementById("lvlCostMin").innerHTML="Current Lvl: "+minesLvl+"Cost: "+minesMCost+"Met; "+minesOCost+"Org; "+minesRCost+"Rad.";
document.getElementById("lvlCostOrd").innerHTML="Current Lvl: "+orderCenterLvl+"Cost: "+orderCenterMCost+"Met; "+orderCenterOCost+"Org; "+orderCenterRCost+"Rad.";
document.getElementById("lvlCostPart").innerHTML="Current Lvl: "+particlesLvl+"Cost: "+particlesMCost+"Met; "+particlesOCost+"Org; "+particlesRCost+"Rad.";
document.getElementById("lvlCostPlut").innerHTML="Current Lvl: "+plutlvl+"Cost: "+plutMCost+"Met; "+plutOCost+"Org; "+plutRCost+"Rad.";
document.getElementById("lvlCostRes").innerHTML="Current Lvl: "+scienceInvestLvl+"Cost: "+scienceInvestMCost+"Met; "+scienceInvestOCost+"Org; "+scienceInvestRCost+"Rad.";
document.getElementById("lvlCostSol").innerHTML="Current Lvl: "+solarPlantsLvl+"Cost: "+solarPlantsMCost+"Met; "+solarPlantsOCost+"Org; "+solarPlantsOCost+"Rad.";
document.getElementById("lvlCostSpc").innerHTML="Current Lvl: "+spcIndustriesLvl+"Cost: "+spcIndustriesMCost+"Met; "+spcIndustriesOCost+"Org; "+spcIndustriesRCost+"Rad.";
document.getElementById("lvlCostStor").innerHTML="Current Lvl: "+storagelvl+"Cost: "+storageMCost+"Met; "+storageOCost+"Org; "+storageRCost+"Rad.";
document.getElementById("lvlCostUrb").innerHTML="Current Lvl: "+urbanitzationLvl+"Cost: "+urbanitzationMCost+"Met; "+urbanitzationOCost+"Org; "+urbanitzationRCost+"Rad.";

}

最佳答案

您正在尝试设置 innerHTML的<br>元素。这是一个空元素，不能有子元素(这也意味着您的 XHTML 无效； use a validator )。您需要使用可以具有子节点的元素(例如 <div> 、 <span> 或 <p> )。

关于javascript - document.getElementById ("").innerHTML= 不起作用(但只是部分起作用)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17170250/

上一篇：javascript - 附加动态元素.find() jquery

下一篇：javascript - 如何将用户映射到角色并在 javascript 中相应地执行代码？

相关文章：

javascript - JQuery 函数 keyup 在我的项目中不起作用，而其他函数可以工作

javascript - 如何让 Anytime 日期选择器有选择地触发

javascript - 将innerHTML更改为附近的文档

javascript - 设置 NumbroJS 文化

javascript - 脚本标签在 SartajPHP 临时文件中不起作用

javascript - 三.js改变分辨率

JavaScript scrollBy(x,y) 不适用于 Android WebView 中的样式列宽

javascript - 对象不支持属性或方法 'fill'

javascript - 类型不匹配 - JavaScript

javascript - 将 Vue.JS 项目转换为 Nuxt.JS 项目

©2024 IT工具网  联系我们