Javascript and CSS if statement

Question

Im very new to programming and im trying to make a code which will cause an image to only appear if the ctrl key is not being pressed.

<script language=JavaScript>

document.onkeydown = checkKey;
var Showimg = False;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '17') {
      alert('test');
      Showimg = True;
    }
}
</script>

This is the code ive currently got. I have code in another division below which has the code for the image in.

I'm very new to CSS and javascript, and basically most coding in general, so im not sure if its possible to get an image to no longer show if the ctrl key is pressed, as "if" statements dont seem to work outside the script, but the image code wont work inside the script.

This may not be detailed enough, sorry.

Do you want the ctrl key to be in addition to it? If you are looking to only act on keypresses where the key is held down, you could check out the ctrlKey property on the KeyboardEvent. developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey Great place to start. — Antiga
– Antiga, Commented Jan 6, 2016 at 18:15
In html5, language is deprecated, and type is optional. You can just use <script>. — recursive
– recursive, Commented Jan 6, 2016 at 18:18
@Sushanth-- using strict comparisons because it's "faster" is nonsense. We use it because we want to prevent errors and/or want to compare types. — PeeHaa
– PeeHaa, Commented Jan 6, 2016 at 18:24

aw04 · Accepted Answer · 2016-01-06 18:18:47Z

3

So you have the event part down to determine when the ctrl key is pressed. What you need now (apart from some syntax issues others have pointed out) is to use javascript to hide the image. First you'll want a way to identify it, so for example you can add an id of img (or whatever).

<img id="img">

Then you can use js to target this and change the display property within your if statement.

document.getElementById('img').style.display = 'none';

This code will a) find the image, and b) change the display to not be shown.

answered Jan 6, 2016 at 18:18

aw04

11.2k11 gold badges60 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

guysigner Over a year ago

In case the page has relative layout, element.style.display = "none" might cause changes in the positioning of other elements. In such case it is probably preferred to use element.style.visibility = "hidden".

aw04 Over a year ago

@remdevtec Depends on your interpretation of 'not shown' :) Fair point though

Febrian Wilson · Accepted Answer · 2016-01-06 18:35:53Z

0

function checkKey(e) {
    e = e || window.event;
    console.log(e);
    if (e.keyCode === 17) {
      document.getElementById('image').style.display = 'none';
    }
}
function show() {
    document.getElementById('image').style.display = 'block';
}

make the body like this

<body onkeydown="checkKey()" onkeyup="show()">

and for the image, you could make it like this

<img src="test.jpg" id="image">

answered Jan 6, 2016 at 18:35

Febrian Wilson

11 bronze badge

Collectives™ on Stack Overflow

Javascript and CSS if statement

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related