Issue with getting focus

Question

I'm trying to change the img if the user clicks anywhere inside the specified div element. Nothing is happening, i know something must be wrong.

So far i have this

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">

@L3SAN if you run the snippet, you can clearly tell your code is invalid, due diligence is expected. http://stackoverflow.com/help/how-to-ask — Ruan Mendes, Nov 11 '16 at 02:05
@JuanMendes I understand, i'm also learning at the same time. — L3SAN, Nov 11 '16 at 02:09
If your question was "why am I getting a syntax error?", that would be a valid question showing some due dilligence — Ruan Mendes, Nov 11 '16 at 02:13

score 1 · Answer 1 · answered Nov 11 '16 at 02:04

1

Not sure if I'm getting right what you're trying to do. You can see a working code here :

You had some typos in your code and missed the parenthesis for the if condition

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">

answered Nov 11 '16 at 02:04

Lau

179
2
4
13

You didn't mention the most important part, [document.activeElement](http://stackoverflow.com/questions/354718/detect-which-form-input-has-focus-using-javascript-or-jquery/4455401#4455401) – Ruan Mendes Nov 11 '16 at 02:07
That's it! You used the onclick i see. Thank you. – L3SAN Nov 11 '16 at 02:08
You're welcome. You can accept my answer if your problem is solved. You should also read doc for activeElement as Juan Mendes suggested : https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement – Lau Nov 11 '16 at 02:11
@Lau Question, the first image src set in that js doesn't get used? I know it's the same image as the html img tag originally. – L3SAN Nov 11 '16 at 02:12

score 0 · Answer 2 · answered Nov 11 '16 at 02:01

0

Please check the else part. you are missing d for document in ocument.getElementById('pic1').src

answered Nov 11 '16 at 02:01

Boopathi D

361
2
21

That's two of them.. – Nov 11 '16 at 02:02
@L3SAN again you made a mistake in if condition. `;` should not be there. please edit it. if document.getElementById("demo").hasFocus`;` { – Boopathi D Nov 11 '16 at 02:09
`if (document.getElementById("demo").hasFocus)` is the correct one. – Boopathi D Nov 11 '16 at 02:11

Emilio Grisolía · Answer 3 · 2016-11-11T02:21:07.260

0

The conditions evaluated on the if must be inside parentheses, and there should not be semicolon after it:

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

This is the first thing you need to change, since this is not even valid javascript. The semicolon indicates the end of a statement.

After you fix that, you are saying that there must be a handler for a click event on a div. Divs are not "focusable" by default, you need to set it's tabindex property to 1.

Also, if you want to react on a click, you must add an event listener!

someHTMLElement.addEventListener('click', function_to_execute_onclick)

Or do you need to react to the click event only when the div is focused?

EDIT: Well, you only need a button first!

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

And the JS:

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

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

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

edited Nov 11 '16 at 02:21

answered Nov 11 '16 at 02:12

Emilio Grisolía

1,183
1
9
16

I wasn't aware that divs don't have a focus state. Basically what i'm trying to accomplish is this: I have an mp3 audio player and if the user clicks play, the album art will display somewhere else on the page. – L3SAN Nov 11 '16 at 02:14
They can be focusable if you set it's `tabindex` property to 1 :) You then need to add a click event on a button! I'll edit my answer. – Emilio Grisolía Nov 11 '16 at 02:15
Here is the weird thing, I'm using adobe muse to create this. I added the mp3 widget. Now when i open the html file i see the id for that audio widget but thats about it. nothing else. Now when i right click on the page i have it published at and select inspect element, i go to that id and i see way more elements things like an actual button tag, weird right? – L3SAN Nov 11 '16 at 02:19
I didn't use Adobe Muse, but if you don't have enough experience to write your own html, you shouldn't use it. Also, I don't know what "extra" code may add it to the web's markup. Keep it simple, make your own simple page. – Emilio Grisolía Nov 11 '16 at 02:22
you can see it here: http://lesantest.comuf.com/sunshine%20Productions/player.html now if you look through the code you will notice – L3SAN Nov 11 '16 at 02:25
Which tags are the ones you are not seeing? – Emilio Grisolía Nov 11 '16 at 02:27
all of these: http://i.imgur.com/KEPORic.png that portion of the code does not appear at all in notepad++ – L3SAN Nov 11 '16 at 02:34

Issue with getting focus

3 Answers3