获得焦点的问题[关闭]

Question

如果用户单击指定 div 元素内的任何位置，我正在尝试更改 img。什么都没有发生，我知道一定有问题。

到目前为止我有这个

setInterval("myFunction()", 1);

function myFunction() {
 
    if document.getElementById("demo").hasFocus; {
        document.getElementById('pic1').src='https://pbs.twimg.com/profile_images/701853789855346689/iKxIyGkO.png';
    } else {
        document.getElementById('pic1').src='https://pbs.twimg.com/profile_images/688766010837446657/2DgfpAQ6.png';
    }
}

<div style="border-style: solid;height:20px;" id="demo"></div>

<img id="pic1" src="https://pbs.twimg.com/profile_images/688766010837446657/2DgfpAQ6.png">

Answer 1

不确定我是否正确地尝试了您正在尝试做的事情。你可以在这里看到一个工作代码：

您的代码中有一些拼写错误，并且错过了 if 条件的括号

var demo = document.getElementById('demo');
demo.addEventListener('click', myFunction, false);

function myFunction() {

  if (document.getElementById("demo") === document.activeElement) {
    document.getElementById('pic1').src = 'https://pbs.twimg.com/profile_images/701853789855346689/iKxIyGkO.png';
  } else {
    document.getElementById('pic1').src = 'https://screenshots.fr.sftcdn.net/fr/scrn/76000/76818/microsoft-small-basic-22.jpg';
  }
}

<div style="border-style: solid;height:20px;" id="demo"></div>

<img id="pic1" src="https://pbs.twimg.com/profile_images/688766010837446657/2DgfpAQ6.png">

Answer 2

请检查其他部分。 ocument.getElementById('pic1').src 中的文档缺少 d

Answer 3

if 上计算的条件必须在括号内，并且后面不能有分号：

if (document.getElementById("demo").hasFocus)
{ // do something }

这是您需要更改的第一件事，因为这甚至不是有效的 javascript。分号表示语句的结束。

在你解决这个问题之后，你是说必须有一个 div 上的点击事件的处理程序。默认情况下，div 不是“可聚焦”的，您需要将其 tabindex 属性设置为 1。

另外，如果你想对点击做出反应，你必须添加一个事件监听器！

someHTMLElement.addEventListener('click', function_to_execute_onclick)

还是只需要在 div 获得焦点时才对点击事件做出反应？

编辑： 好吧，你只需要一个按钮！

<img id = "pic">
<button id = 'play'>Play</button>

还有 JS：

const img = document.getElementById('pic');

function changePicture ()
{ img.src = 'some/pic.jpg'
  // do more stuff on click.
}

document.getElementById('play')
        .addEventListener('click', changePicture);