Проблема с фокусировкой

Не уверен, правильно ли я понимаю, что вы пытаетесь сделать. Здесь вы можете увидеть рабочий код:

Вы допустили опечатки в коде и пропустили круглую скобку для условия 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">

Пожалуйста, проверьте другую часть. вам не хватает d для документа в ocument.getElementById('pic1').src

Условия, оцениваемые для 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);