Member Avatar for Tinnin

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.

Edited by Tinnin
  • 3 Contributors
  • 10 Replies
  • 368 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Tinnin
Member Avatar for Tinnin

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 :(

Edited by Tinnin
Member Avatar for Tinnin

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

Edited by Tinnin
Member Avatar for JorgeM

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/

Member Avatar for Tinnin

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

Member Avatar for JorgeM

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 by JorgeM
Member Avatar for Tinnin

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.

Edited by Tinnin
Member Avatar for JorgeM

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.

Member Avatar for Tinnin

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

Member Avatar for Tinnin

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'

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.