Question

我的虚拟键盘需要帮助，在我的键盘上有一个DIV用于制作按钮值=＆＃34; MAG＆＃34;在javascript工作，但我使用相同的DIV使键盘工作和写，但使用一个具有相同ID =＆＃34; Div1＆＃34;对我不起作用......所以我必须在两者之间做出选择（（使用键盘书写......或者将键盘从MAG更改为MIN））不是两者兼而有之！ ....这是我的代码，你可以看到你只能使用键盘写，但你不能使用MAG按钮....我很抱歉我的英语不好...

＆＃13;

<html>
<head>
<style type="text/css">
#Div1{
 display: block;

}

#Div2 {
  display: none;

}

.divs
{
 width: 50px;
 height: 50px;
 border: 1px solid #000;
}
</style>
<style type="text/css">

*{margin:0;padding:0;}
*{margin:0;padding:0;}</style>
<script>
(function() {
   'use strict';
   var i,c;
function init(){ 
/* get all the input elements within the div whose id is "keyboard */
   i=document.getElementById('Div1').getElementsByTagName('input'); 
/* loop through all the elements */   
for(c=0;c<i.length;c++) {
/* find all the the input type="button" elements */
if(i[c].type==='button') { 
 /* add an onclick handler to each of them  and set the function to call */
   i[c].addEventListener('onclick',makeClickHandler(c));
   }
  }

/* this is the type="reset" input */
document.getElementById('clear').onclick=function() {
/* remove all the characters from the input type="text" element */
   document.getElementById('text').value='';
  }
 }

function makeClickHandler(c) {
   i[c].onclick=function() {
/* find the non-text button  which has an id */
if(i[c].id==='back') {
/* remove last character from the input the type="text" element using regular expression */
   document.getElementById('text').value=
   document.getElementById('text').value.replace(/.$/,'');
 }
/* find the text buttons */
else {
/* add characters to the input type="text" element */
   document.getElementById('text').value+=this.value.toLowerCase();
   }
  };
 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
})();
</script>
</head>
<body>



<div id="Div1">

<div>
<input value="1" type="button">
<input value="2" type="button">
<input value="3" type="button">
<input value="4" type="button">
<input value="5" type="button">
<input value="6" type="button">
<input value="7" type="button">
<input value="8" type="button">
<input value="9" type="button">
<input value="0" type="button">
<input value="Borrar" type="button">
</div><div>
<input value="q" type="button">
<input value="w" type="button">
<input value="e" type="button">
<input value="r" type="button">
<input value="t" type="button">
<input value="y" type="button">
<input value="u" type="button">
<input value="i" type="button">
<input value="o" type="button">
<input value="p" type="button">
<input value="`" type="button">
<input value="+" type="button">
</div><div><input value="a" type="button">
<input value="s" type="button">
<input value="d" type="button">
<input value="f" type="button">
<input value="g" type="button">
<input value="h" type="button">
<input value="j" type="button">
<input value="k" type="button">
<input value="l" type="button">
<input value="ñ" type="button">
<input value="´" type="button">
<input value="ç" type="button">
</div><div>
<input value="&lt;" type="button">
<input value="z" type="button">
<input value="x" type="button">
<input value="c" type="button">
<input value="v" type="button">
<input value="b" type="button">
<input value="n" type="button">
<input value="m" type="button">
<input value="+" type="button">
<input value="." type="button">
<input value="-" type="button">
<input disabled="disabled" value=" " type="button">
</div><div>
<input id="Button1" value="MAG." type="button"  onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="MAG." type="button"  onclick="switchVisible();">
</div></div>
<div id="Div2" style="display:none" class="keyboard"><div>
<input value="!" type="button">
<input value="&quot;" type="button">
<input value="·" type="button">
<input value="$" type="button">
<input value="%" type="button">
<input value="&amp;" type="button">
<input value="/" type="button">
<input value="(" type="button">
<input value=")" type="button">
<input value="=" type="button">
<input value="Borrar" type="button">
</div><div>
<input value="Q" type="button">
<input value="W" type="button">
<input value="E" type="button">
<input value="R" type="button">
<input value="T" type="button">
<input value="Y" type="button">
<input value="U" type="button">
<input value="I" type="button">
<input value="O" type="button">
<input value="P" type="button">
<input value="^" type="button">
<input value="*" type="button">
</div><div>
<input value="A" type="button">
<input value="S" type="button">
<input value="D" type="button">
<input value="F" type="button">
<input value="G" type="button">
<input value="H" type="button">
<input value="J" type="button">
<input value="K" type="button">
<input value="L" type="button">
<input value="Ñ" type="button">
<input value="¨" type="button">
<input value="Ç" type="button">
</div><div>
<input value="&gt;" type="button">
<input value="Z" type="button">
<input value="X" type="button">
<input value="C" type="button">
<input value="V" type="button">
<input value="B" type="button">
<input value="N" type="button">
<input value="M" type="button">
<input value=";" type="button">
<input value=":" type="button">
<input value="_" type="button">
<input disabled="disalbed" value="" type="button">
</div><div>
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
</div></div></div></div>
<div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>
<script type="text/javascript">
 function switchVisible() {
    	var div1=document.getElementById('Div1');
    	var div2=document.getElementById('Div2');
    	
      if (div1 !== undefined && div2 !== undefined) {
    	  div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
    	  div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
      }
    }
</script>
</body>
</html>

＆＃13;

Answer 1

有一些问题需要解决：

主要问题：

控制台JS错误 - 没有ID为＆＃34;清除＆＃34;。
我没有看到ID为＆＃34;返回＆＃34;的按钮。
- 我猜测它是＆＃34; Borrar＆＃34;按钮，但它没有ID。
- 下一点讨论的init函数中的循环也需要跳过它。

有4个<input id="Button1"...：

ID必须是唯一的。

但是这些按钮确实需要一个类或ID来阻止makeClickHandler附加onclick函数并覆盖内联onclick定义。

/* find all the the input type="button" elements */
if(i[c].type==='button' && (i[c].id !== "Button1" || i[c].id !== "back")) { 
    /* add an onclick handler to each of them  and set the function to call */
    i[c].addEventListener('onclick',makeClickHandler(c));
}

小问题：

将<head>中的IIFE script移至页面底部;然后你不需要为＆＃34; onload＆＃34;添加一个事件监听器。
代码几乎不可读。请正确使用缩进并保持一致！
输入错误拼写 - disabled="disalbed"
按照惯例，元素ID不应以大写字母开头。
避免使用onclick或任何内联JavaScript。这称为separation of concerns。
了解/了解event delegation;它会使代码更清洁。

一个<div id =“Div1”> ...两个功能... javascript virtualkeyboard

1 个答案: