innerHTML javascript动态
我目前在一个小javascript项目中遇到了一些关于innerHTML函数的问题。基本上,我有几个HTML表单复选框,它们根据是否选中来更改数字(显示在同一页面上)。这个想法很像一个IP地址。结果是一个介于0和255之间的数字 但是,我想做的是,每当用户单击复选框时,我需要动态更改该数字。这个想法类似于我们在这个论坛上写问题时使用的概念。当您键入时,下面的文本会动态更改,以准确显示更改时所更改的内容 我的代码运行得不太好。你能帮我吗?它总是给我信息“未定义”,而不是总和。谢谢你的帮助 JavaScriptinnerHTML javascript动态,javascript,dynamic,innerhtml,Javascript,Dynamic,Innerhtml,我目前在一个小javascript项目中遇到了一些关于innerHTML函数的问题。基本上,我有几个HTML表单复选框,它们根据是否选中来更改数字(显示在同一页面上)。这个想法很像一个IP地址。结果是一个介于0和255之间的数字 但是,我想做的是,每当用户单击复选框时,我需要动态更改该数字。这个想法类似于我们在这个论坛上写问题时使用的概念。当您键入时,下面的文本会动态更改,以准确显示更改时所更改的内容 我的代码运行得不太好。你能帮我吗?它总是给我信息“未定义”,而不是总和。谢谢你的帮助 Java
function displayOctets01(){
var octet01 = new Array(8);
octet01[0] = document.getElementById('octect0101');
octet01[1] = document.getElementById('octect0102');
octet01[2] = document.getElementById('octect0103');
octet01[3] = document.getElementById('octect0104');
octet01[4] = document.getElementById('octect0105');
octet01[5] = document.getElementById('octect0106');
octet01[6] = document.getElementById('octect0107');
octet01[7] = document.getElementById('octect0108');
var firstOctect;
if(octet01[0]==true){
firstOctect+=1;
}
else if(octet01[1]==true){
firstOctect+=2;
}
else if(octet01[2]==true){
firstOctect+=4;
}
else if(octet01[3]==true){
firstOctect+=8;
}
else if(octet01[4]==true){
firstOctect+=16;
}
else if(octet01[5]==true){
firstOctect+=32;
}
else if(octet01[6]==true){
firstOctect+=64;
}
else if(octet01[7]==true){
firstOctect+=128;
}
document.getElementById("octets01").innerHTML = firstOctect;
}
else if(octet01[7]==true){
firstOctect+=128;
}
document.getElementById("octets01").innerHTML = firstOctect;
}
我怀疑我处理变量的方式可能有问题
演示:第一个问题是
firstOctet
变量未初始化。这需要在函数开始时设置为0
。另外,在不知道程序的用途的情况下,您似乎不想使用,否则如果,您需要选中每个复选框。另外,您不应该将元素与==true
进行比较,您应该检查它的checked
属性。此外,您的JSFIDLE设置为运行onLoad
,因此该函数不是全局可用的。最后,您没有一个id为“octets01”的元素要输出到。试试这个:
function displayOctets01() {
var octet01 = [],
firstOctect = 0;
octet01[0] = document.getElementById('octect0101');
octet01[1] = document.getElementById('octect0102');
octet01[2] = document.getElementById('octect0103');
octet01[3] = document.getElementById('octect0104');
octet01[4] = document.getElementById('octect0105');
octet01[5] = document.getElementById('octect0106');
octet01[6] = document.getElementById('octect0107');
octet01[7] = document.getElementById('octect0108');
if (octet01[0].checked === true) {
firstOctect += 1;
}
if (octet01[1].checked === true) {
firstOctect += 2;
}
if (octet01[2].checked === true) {
firstOctect += 4;
}
if (octet01[3].checked === true) {
firstOctect += 8;
}
if (octet01[4].checked === true) {
firstOctect += 16;
}
if (octet01[5].checked === true) {
firstOctect += 32;
}
if (octet01[6].checked === true) {
firstOctect += 64;
}
if (octet01[7].checked === true) {
firstOctect += 128;
}
document.getElementById("octets01").innerHTML = firstOctect;
}
演示:
虽然我不会撒谎,但我会重新安排一些事情。我会这样做:
window.onload = function () {
var checkboxes = document.querySelectorAll('[name="featuresOctet01"]'),
i;
for (i = 0; i < checkboxes.length; i++) {
addEvent(checkboxes[i], "click", clickHandler);
}
};
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, callback);
} else {
element["on" + eventName] = callback;
}
}
function clickHandler() {
var firstOctect = 0,
checkboxes = document.querySelectorAll('[name="featuresOctet01"]'),
i, cur;
for (i = 0; i < checkboxes.length; i++) {
cur = checkboxes[i];
if (cur.checked) {
firstOctect += Math.pow(2, i);
}
}
document.getElementById("octets01").innerHTML = firstOctect;
}
window.onload=函数(){
var复选框=document.querySelectorAll('[name=“featuresOctet01”]'),
我
对于(i=0;i
演示:
它通过绑定JavaScript中的事件而不是内联HTML来使用不引人注目的JavaScript。我确实使用了click
事件,而不是change
,因为旧版本的IE具有奇怪的行为,带有复选框/单选按钮。addEvent
函数只是一个简单的函数,用于在新浏览器和旧IE中绑定事件
它选择名为“FeatureSocte01”的所有元素,并将事件添加到每个元素中。然后,在处理程序中,它循环检查每个复选框,查看是否已选中,然后根据2^i
添加一个值
参考资料:
addEventListener
:
document.querySelectorAll
:
Math.pow
:
从var firstOctect=0开始
Instead解决了未定义的问题,谢谢。但是逻辑仍然没有产生我想要的结果。在此期间,我将进一步调查。谢谢你的帮助是的,我没想到它能解决所有问题,我只是注意到你试图增加一个未初始化的数字。试着把它放到一个文件夹中,这样我们就可以看到你是如何使用它的。谢谢你,我会查看你的代码。一旦我理解了它,我可能会实施它。再次感谢你的帮助@thienwgu一点问题都没有,谢谢:)我只是更新了我的答案,告诉你我会怎么做。我希望它不会太多,你显然不必使用它,但希望你能学到一些东西。如果您有任何问题或需要更多帮助,请告诉我