Styling in HTML with CSS while using Javascript

Question

How do I transfer the style code to my external css file? I think using .gamelist won't work because of the <form> or <input> stuff. I know that I can just leave the style in the html file but I like everything to be as neat and organized as possible.

Here's the html code:

<div id="sidebar">
    <p class="gamelist">
        <FORM>
            <input type="image" src="images/mariosadv.jpg" border="2" style="border:2px solid black;max-width:150px;" value="Enter Protected Area" onClick="passWord()">
        </FORM>
        <FORM>
            <input type="image" src="images/mariosadv2.jpg" border="2" style="border:2px solid black;max-width:150px;" value="Enter Protected Area" onClick="passWord()">
        </FORM>
</div>

Here's my simple Javascript function:

function passWord() {
    var testV = 1;
    var pass1 = prompt('Please Enter Your Password',' ');
    while (testV < 3) {
    if (!pass1) 
    history.go(-1);
    if (pass1.toLowerCase() == "letmein") {
    alert('You Got it Right!');
    window.open('mariosadv.html');
    break;
} 
    testV+=1;
    var pass1 = 
    prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
    if (pass1.toLowerCase()!="password" & testV ==3) 
    history.go(-1);
    return " ";
}

Here's the css I tried:

.gamelist img {
    display: block;
    border: 2px solid black;
    width:150px;
    margin: 5px 0px 5px 0px;
}

This is what I have with Javascript https://i.sstatic.net/RThLl.jpg

And this is what I want but without the Javascript https://i.sstatic.net/ZBcTI.jpg

If any additional information is needed please ask before rejecting my question. Thanks.

@errieman I'm still new to coding so could you tell me what client-side authentication is? — TheUnCola
– TheUnCola, Commented Apr 5, 2013 at 15:41
@TheUnCola It's way too much to put in a comment, but basicly it is checking if a password is correct on the client side. Which is not save because everyone can see your script. (JavaScript is client side) you should look into some security tutorials or lessons before you make things public. As for now, if you are just hobbying and not letting other people use your application, it will not be necessary. But remember that people will try everything to exploit software, sokeep it safe. — errieman
– errieman, Commented Apr 5, 2013 at 23:09
@errieman yea this is just a website for educational purposes. If I do stuff later in life I will make the security a lot better before making it public. — TheUnCola
– TheUnCola, Commented Apr 8, 2013 at 15:06

metadept · Accepted Answer · 2013-04-05 17:38:55Z

3

You'll need to be styling the .gamelist [type=image] instead of .gamelist img, since the img only refers to tags with that name (not to images in general).

EDIT Here's what your HTML should look like:

<div class="gamelist">
    <FORM>
        <input type="image" src="images/mariosadv.jpg" value="Enter Protected Area" onClick="passWord()">
    </FORM>
    <FORM>
        <input type="image" src="images/mariosadv2.jpg" value="Enter Protected Area" onClick="passWord()">
    </FORM>
</div>

edited Apr 5, 2013 at 17:38

answered Apr 5, 2013 at 14:29

metadept

7,9892 gold badges21 silver badges25 bronze badges

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

5 Comments

TheUnCola Over a year ago

Wow I really thought that would work but it's still doing the same thing. I feel like im really close to getting it though. Sorry for the delayed response.

metadept Over a year ago

@TheUnCola Could you provide a jsFiddle or a link to your page that shows where it's not working? It's hard to give a more specific answer with the code provided.

TheUnCola Over a year ago

udel.edu/~ssell/games.html Sorry I hit add comment but it must not have went through since my internet sucks right now.

metadept Over a year ago

@TheUnCola Looks like you're not properly closing your p tag on the gamelist so the inputs aren't actually inside it. You should probably just use a div instead of a p, and make sure it contains the forms and inputs inside the tag.

TheUnCola Over a year ago

Wow that was a very simple mistake. Thanks for all your help!

eL burro · Accepted Answer · 2013-04-05 14:48:00Z

0

As metadept wrote, you'll need to use following CSS selector: input[type='image']. Be aware that .gamelist input[type='image'] don't select the needed input fields because they haven't the class gamelist.

For a CSS Selector overview use: http://www.w3schools.com/cssref/css_selectors.asp

And please do not use client side authentification!!!

answered Apr 5, 2013 at 14:48

eL burro

1

1 Comment

errieman Over a year ago

Please avoid w3schools. It contains a lot of misinformation. Instead, use information provided by the w3c: w3.org/TR/css3-selectors

Collectives™ on Stack Overflow

Styling in HTML with CSS while using Javascript

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related