document.getElementById().style problem

Question

Tinnin 8 Posting Whiz in Training

11 Years Ago

Hi all,

I'm trying to change the border style of some buttons (but nothing is happening) with the following code:

<script type="text/javascript" src="JavaScript/WS_Button.js"></script>

which is in the <head> section.

and:

<td id="register_button_area"><input type="submit" name="register" value="register" id="register_button" /></td>
<td id="login_button_area"><input type="submit" name="login" value="login" id="login_button"  /></td>

which is in the <form>.

and the WS_Button.js file:

// JavaScript Document

var reg_button = document.getElementById("register_button");
var log_button = document.getElementById("login_button");



reg_button.onmouseover = function() {
    reg_button.style.borderLeft="1px solid black";
    reg_button.style.borderTop="1px solid black";
    reg_button.style.borderRight="1px solid #8A080A";
    reg_button.style.borderBottom="1px solid #8A080A";
};
reg_button.onmouseout = function() {
    reg_button.style.borderRight="1px solid black";
    reg_button.style.borderBottom="1px solid black";
    log_button.style.borderLeft="1px solid #8A080A";
    log_button.style.borderTop="1px solid #8A080A";
};

log_button.onmouseover = function() {
    log_button.style.borderLeft="1px solid black";
    log_button.style.borderTop="1px solid black";
    reg_button.style.borderRight="1px solid #8A080A";
    reg_button.style.borderBottom="1px solid #8A080A";
};
log_button.onmouseout = function() {
    log_button.style.borderRight="1px solid black";
    log_button.style.borderBottom="1px solid black";
    log_button.style.borderLeft="1px solid #8A080A";
    log_button.style.borderTop="1px solid #8A080A";
};

Not sure where I am going wrong with this.

Thanks for any help offered.

javascript

Edited 11 Years Ago by Tinnin

3 Contributors
10 Replies
366 Views
2 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by Tinnin

All 10 Replies

stbuchok

11 Years Ago

I would suggest using a css class and add or remove the css class association to the button.

http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript

JorgeM 958 Problem Solver

11 Years Ago

I copied your original code in a text file, save it and opened it with IE9, Chrome, and Opera. The JavaScript events executed as expected.

Uploaded to jsfiddle.net --> http://jsfiddle.net/3afEY/

JorgeM 958 Problem Solver

11 Years Ago

Yes, that is possible. When I tested locally, I just included your JS in the same file.

If you have a folder called JavaScript, you may want to simply reference it from the root of the web app, such as..

<script src="/JavaScript/WS_Button.js"></script>

However, your reference should work if you have a folder called JavaScript at the same level as the file you are accessing.

Another thing that comes to mind which I am not sure about, but just mentioning it... I know that some server side scripting languages are case sensitive. I am not sure what you are running. I tested this in plain HTML.

Edited 11 Years Ago by JorgeM

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Tinnin 8 Posting Whiz in Training · Answer 1 · 2013-03-07T13:43:02+00:00

Thanks stbuchok

So something like this?

css:

#register_button, #login_button {
    background-color: #8A080A;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid #8A080A;
    border-top: 1px solid #8A080A;
    width: 70px;
}

.mouseon {
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid #8A080A;
    border-bottom: 1px solid #8A080A;
}

JavaScript:

// JavaScript Document

var reg_button = document.getElementById("register_button");
var log_button = document.getElementById("login_button");



reg_button.onmouseover = function() {
    reg_button.className += " mouseon";
};
reg_button.onmouseout = function() {
    reg_button.className = reg_button.className.replace( /(?:^|\s)mouseon(?!\S)/g , '' );
};

log_button.onmouseover = function() {
    log_button.className += " mouseon";
};
log_button.onmouseout = function() {
    log_button.className = log_button.className.replace( /(?:^|\s)mouseon(?!\S)/g , '' );
};

I still can't get it to work :(

Tinnin 8 Posting Whiz in Training · Answer 2 · 2013-03-07T13:44:42+00:00

Corrected my last post. The part about it not working is still true.

Tinnin 8 Posting Whiz in Training · Answer 3 · 2013-03-07T14:40:34+00:00

Thanks JorgeM. Perhaps I'm not linking to the js file properly?

Tinnin 8 Posting Whiz in Training · Answer 4 · 2013-03-07T14:56:48+00:00

Currently I have a seperate 'WS_header.html' which is in a file called in 'includes'.
'WS_header.html' is included in 'WS_index.php' at the start of the .php file using:

<?php 

$page_title = "Home";

include ('includes/WS_header.html');
?>

WS_header.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title><?php echo $page_title; ?></title>
  <link rel="stylesheet" href="css/WS_style.css" type="text/css" media="screen" />
  <script type="text/javascript" src="JavaScript/WS_Button.js" ></script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
  <div id="header">
    <h1>WS</h1>
  </div>
  <div id="navigation">
    <ul>
      <li><a href="WS_index.php">Home</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
      <li><a href="#">link4</a></li>
    </ul>
  </div>
  <div id="content"><!--Start of the page-specific content.-->

The buttons and whatnot are in 'WS_index.php'. I can't see any faults with the case-sensitivity.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 5 · 2013-03-07T15:18:46+00:00

so I have very, very limited experience with PHP, but I understand the purpose of the includes. I am more familiar with asp.net.

In any case, if its a reference problem where the external JS is not loading, you should be easily able to troubleshoot that using the dev tools that come with your browser. The tools would indicate a 404 error.

Tinnin 8 Posting Whiz in Training · Answer 6 · 2013-03-07T15:23:12+00:00

Added this to my js:

onload = window.alert("It's ALIVE!");

and it comes up just fine.

Would my CSS be causing the problem? So confused...

Tinnin 8 Posting Whiz in Training · Answer 7 · 2013-03-07T15:30:50+00:00

Got it working. It seems I had to place

<script type="text/javascript" src="JavaScript/WS_Button.js" ></script>

after the button code in 'WS_index.php'

document.getElementById().style problem

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers