Question

********************************* HTML代码************ ************************

<table id="myTable">

<tr>
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">A</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">B</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">C</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">D</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">E</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">F</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">G</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">H</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">I</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">J</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">K</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">L</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">M</a></td> 
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">N</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">O</a></td> 
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">P</a></td> 
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">Q</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">R</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">S</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">T</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">U</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">V</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">W</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">X</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">Y</a></td>  
    <td><a id="LettersInTheTable" onclick="LetterPressed()" href="">Z</a></td>
</tr>

**************************** Javascript代码******************* ****************

var Words=["GREEN","LOVE","HOPE","JOYOUS"];
var Letter="";
var z;
var x;

function LetterPressed(){
      x = document.getElementById("LettersInTheTable").text;
  document.getElementById("Letterzz").innerHTML = x;
  window.alert(x);
}

Answer 1

这是因为document.getElementById("LettersInTheTable").text;此代码在DOM中搜索带有该Id的元素，并返回找到的第一个元素，并且其中的内部文本为A，因此进行以下更改

var Words = ["GREEN", "LOVE", "HOPE", "JOYOUS"];
var Letter = "";
var z;
var x;

function LetterPressed(event) {
  event.preventDefault() // writing to stop redirection 
  console.log(event.target.innerHTML);
  x = event.target.innerHTML;
  document.getElementById("Letterzz").innerHTML = x;
}

<table id="myTable">

  <tr>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">A</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">B</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">C</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">D</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">E</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">F</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">G</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">H</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">I</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">J</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">K</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">L</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">M</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">N</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">O</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">P</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">Q</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">R</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">S</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">T</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">U</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">V</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">W</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">X</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">Y</a></td>
    <td><a id="LettersInTheTable" onclick="LetterPressed(event)" href="">Z</a></td>
  </tr>
</table>

<div id="Letterzz"></div>

Answer 2

我不确定您要完成什么，但是如果您只是想跟踪在html页面上被按下的键，则可以使用

document.addEventListener('keydown', event => {});

我认为您可以做这样的事情

document.addEventListener('keydown', event => {
   let key = event.key.toLowerCase()
   console.log(key)
   document.getElementById('Letterzz').innerHTML = key
}

当前，您的HTML没有一个名为Letterzz的ID，因此我不确定您试图将按下的键放在哪里。希望这会有所帮助。

Answer 3

您在每个html元素中都使用了相同的ID。如果您想访问它们，那么理想情况下，它们应该是不同的。

更好的方法是

function LetterPressed(event){
  x = document.getElementById(event.target.id).text;
  document.getElementById("Letterzz").innerHTML = x;
  window.alert(x);
}

无论我按下哪个链接，“ x”变量始终保存值“ A”

3 个答案: