Question

我正在制作周期表。你可以在这里看到整件事：My periodic table

（尚未完成，我知道89-103不正确！而且这种类人猿还不在表中）

似乎每当我在脚本中更改某些内容时，所有功能都会突然“未定义”（即使我只更改了一个）。

我在这里有一个例子：

此代码有效：

function alkali() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf("alkali")>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}
function alkaline() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf("alKaline")>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}

function lanthanoid() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf("lanthanoid")>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}

function actinoids() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf("actinoids")>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}

function transitionMetal() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf("transitionMetal")>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}

function poormetal() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf("poormetal")>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}

function nonmetal() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf("nonmetal")>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}

function noblegas() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf("noblegas")>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}

function reset() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
    while(++i < colslen){
        cols[i].style.opacity = "1";
	}
}

        <td class="alkali I" onmouseover="alkali()" onmouseout="reset()">Alkali Metals</td>
        <td class="alKaline I" onmouseover="alkaline()" onmouseout="reset()">Alkaline Metals</td>
        <td class="lanthanoid I" onmouseover="lanthanoid()" onmouseout="reset()">Lantha-<br>noids</td>
        <td class="actinoids I" onmouseover="actinoids()" onmouseout="reset()">Actinoids</td>
        <td class="transitionMetal I" onmouseover="transitionMetal()" onmouseout="reset()">Transition Metals</td>
        <td class="poormetal I" onmouseover="poormetal()" onmouseout="reset()">Poor Metals</td>
        <td class="nonmetal I" onmouseover="nonmetal()" onmouseout="reset()">Non-<br>metals</td>
        <td class="noblegas I" onmouseover="noblegas()" onmouseout="reset()">Noble gases</td>

（上面的代码目前在链接网站上）

我认为有一种更简单的方法可以做到这一点，因为所有的功能都有同样的功能。但是，当我更改代码时，所有功能都是“未定义”。即使是我没有触及的复位功能！

function populate(catagory) {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
	while(++i < colslen){
		if(cols[i].className.indexOf(catagory)>0){}
		else {cols[i].style.opacity = "0.3"}
	}
}

function reset() {
   var cols = document.getElementById('theTable').getElementsByTagName('td'), colslen = cols.length, i = -1;
    while(++i < colslen){
        cols[i].style.opacity = "1";
	}
}

        <td class="alkali I" onmouseover="populate('alkali')" onmouseout="reset()">Alkali Metals</td>
        <td class="alKaline I" onmouseover="populate('alkaline')" onmouseout="reset()">Alkaline Metals</td>
        <td class="lanthanoid I" onmouseover="populate('lanthanoid')" onmouseout="reset()">Lantha-<br>noids</td>
        <td class="actinoids I" onmouseover="populate('actinoids')" onmouseout="reset()">Actinoids</td>
        <td class="transitionMetal I" onmouseover="populate('transitionMetal')" onmouseout="reset()">Transition Metals</td>
        <td class="poormetal I" onmouseover="populate('poormetal')" onmouseout="reset()">Poor Metals</td>
        <td class="nonmetal I" onmouseover="populate('nonmetal')" onmouseout="reset()">Non-<br>metals</td>
        <td class="noblegas I" onmouseover="populate('noblegas')" onmouseout="reset()">Noble gases</td>

我有很多像这样的问题，这让我觉得我错过了一些事情。

有人帮我指出这个问题吗？

Answer 1

您还没有给我们很多帮助，但我可以看到populate和reset突然未定义的唯一原因是：

如果您将它们置于范围函数或onload回调或类似内容中，那么它们就不再是全局的。 onXyz属性事件处理函数必须是全局变量。（不使用它们的众多原因之一。）
您在编辑时会引入语法错误（您已经说过这种情况已经发生了＃34;很多次＆＃34;所以我认为这是更可能的问题）。如果是这样，您可以在打开页面时在Web控制台中看到语法错误，只需确保您显示Web控制台：要在大多数浏览器上打开devtools，请按Ctrl + Shift + I或Cmd + Shift + I或F12。

附注：您可能希望查看querySelector和querySelectorAll函数，这会简化您的DOM查询。他们接受任何CSS选择器。＆＃34;所有＆＃34; version返回一个列表，另一个返回第一个匹配。

例如：

var cols = document.getElementById('theTable').getElementsByTagName('td'), // ...

变为：

var cols = document.querySelectorAll('#theTable td'), // ...

我的功能一直“未定义”

1 个答案: