Javascript/DHTML help

[callumacrae]

Helloo,

I'm working on a script ( http://paperhub.x10hosting.com/sigbar ) but I am having trouble with some DHTML. The code so far:

<p><a class="colour" id="black" onMouseOver="createcolour('black')" style="font-weight:bold" onclick="bold('black')">Black</a>
   <a class="colour" id="red" onMouseOver="createcolour('red')" onclick="bold('red')">Red</a>
   <a class="colour" id="orange" onMouseOver="createcolour('orange')" onclick="bold('orange')">Orange</a>
   <a class="colour" id="yellow" onMouseOver="createcolour('yellow')" onclick="bold('yellow')">Yellow</a>
   <a class="colour" id="green" onMouseOver="createcolour('green')" onclick="bold('green')" weight="bold">Green</a>
   <a class="colour" id="blue" onMouseOver="createcolour('blue')" onclick="bold('blue')">Blue</a>
   <a class="colour" id="purple" onMouseOver="createcolour('purple')" onclick="bold('purple')">Purple</a></p>
   <img src="original/black.jpg" id="previewcolour" alt="" />

     function createcolour(colour){
     document.getElementById('previewcolour').src = 'original/'+colour+'.jpg';
     document.getElementById('previewstyle').src = 'original/'+colour+'.jpg';
     }

     function bold(boldcolour){
alert(boldcolour);
     document.getElementByClass('colour').font-weight = 'normal';
     document.getElementById(boldcolour).font-weight = 'bold';
     
     }

The second bit of js code obviously doesn't work, but it makes it easier to understand what I'm trying to do. How would I make it work?

~Callum
Edit:
The first bit of javascript isn't working either any more :/

~Callum

[misson]

Check your error console. "-" isn't a valid character in identifiers. The "-" in bold() is a subtraction operator. Style property names in JS are formed by removing the "-" from the CSS name and capitalizing the following letter (that is, they use CamelCase). Use "fontWeight", not "font-weight".

Also, there's no such function as getElementByClass. Some browsers support getElementsByClassName, but not IE. You'll have to test whether it's defined and, if not, define it. It should return a collection of nodes, not a single node.

function bold(boldcolour){
    var colours = document.getElementsByClassName('colour');
    for (var i=0; i<colours.length; ++i) {
        colours[i].style.fontWeight = 'normal';
    }
    document.getElementById(boldcolour).style.fontWeight = 'bold'; 
 }

[slacker3]

did you forget ".style" ?

e.g.
document.getElementById("menu").style.visibility = "hidden";

[callumacrae]

Thanks

Fixed that, but the functions aren't getting called any more :/

~Callum

[callumacrae]

No, I've got .style now. Updated code:

     function createcolour(colour){
alert(colour);
     document.getElementById('previewcolour').src = 'original/'+colour+'.jpg';
     document.getElementById('previewstyle').src = 'original/'+colour+'.jpg';
     }

     function bold(boldcolour){
alert(boldcolour);
     document.getElementByClass('colour').style.fontWeight = 'normal';
     document.getElementById(boldcolour).style.fontWeight = 'bold';
     
     }

~Callum

[marshian]

About function bold():
Check out this page: http://www.w3schools.com/Css/pr_font_weight.asp
Instead of font-weight, it should be fontWeight.

Secondly, getElementByClass doesn't exist. There is no actual function build-in to do this afaik, but you can write one yourself quite easily. You can use getElementsByTagName (see http://www.w3schools.com/jsref/dom_obj_document.asp) loop over them, check their className (http://www.w3schools.com/jsref/dom_obj_object.asp) and finally return an array containing all objects with that tag name and class name.

The first appears correct though, see http://www.w3schools.com/jsref/dom_obj_image.asp :dunno:

[callumacrae]

Thanks. They're not being called though.

~Callum
Edit:
Ooh they are now

~Callum

[misson]

See my other, updated reply for other problems. Note that you don't need to use getElementsByClassName:

var bold = (function () {
    var currElt = {style: {}};
    return function(boldColour) {
        currElt.style.fontWeight = '';
        currElt = document.getElementById(boldColour);
        currElt.style.fontWeight = 'bold';
    }
})();

[callumacrae]

I've just written getElementById lots of times

How do I get a variable to carry over between functions?

     function createcolour(colour){
//alert(colour);
     document.getElementById('previewcolour').src = 'original/'+colour+'.jpg';
     }

     function bold(boldcolour){
//alert(boldcolour+'ww');
     document.getElementById('black').style.fontWeight = 'normal';
     document.getElementById('red').style.fontWeight = 'normal';
     document.getElementById('orange').style.fontWeight = 'normal';
     document.getElementById('yellow').style.fontWeight = 'normal';
     document.getElementById('green').style.fontWeight = 'normal';
     document.getElementById('blue').style.fontWeight = 'normal';
     document.getElementById('purple').style.fontWeight = 'normal';

     document.getElementById(boldcolour).style.fontWeight = 'bold';
     document.getElementById('previewstyle').src = 'original/'+boldcolour+'.jpg';
     var colour=boldcolour
     }


     function createstyle(style){
alert(colour);
     //document.getElementById('previewstyle').src = style+'/'+colour+'.jpg';
     }

I want the variable "boldcolour" in the second function to be "colour" in the third function.

~Callum
Edit:
Here is the updated code:

Index.php:

<p><a class="colour" id="black" onMouseOver="createcolour('black')" style="font-weight:bold" onclick="bold('black')">Black</a> - 
   <a class="colour" id="red" onMouseOver="createcolour('red')" onclick="bold('red')">Red</a> - 
   <a class="colour" id="orange" onMouseOver="createcolour('orange')" onclick="bold('orange')">Orange</a> - 
   <a class="colour" id="yellow" onMouseOver="createcolour('yellow')" onclick="bold('yellow')">Yellow</a> - 
   <a class="colour" id="green" onMouseOver="createcolour('green')" onclick="bold('green')" weight="bold">Green</a> - 
   <a class="colour" id="blue" onMouseOver="createcolour('blue')" onclick="bold('blue')">Blue</a> - 
   <a class="colour" id="purple" onMouseOver="createcolour('purple')" onclick="bold('purple')">Purple</a></p>
   <img src="original/black.jpg" id="previewcolour" alt="" />

<?php endBox() ?>
<br />
<?php startBox("Step Two: Choose style"); ?>

<p><a id="original" onMouseOver="createstyle('original')" onclick="select('original')" style="font-weight:bold">Original</a> - 
   <a id="deepCut" onMouseOver="createstyle('deepCut')" onclick="select('deepCut')">Deep Cut</a> - 
   <a id="sineMachine" onMouseOver="createstyle('sineMachine')" onclick="select('sineMachine')">Sine Machine</a></p>
   <img src="original/black.jpg" id="previewstyle" alt="" />

<?php endBox() ?>
<br />
<?php startBox("Step Three: Enter text"); ?>
<form action="image.php" method="get" id="makeown">
    <table style="width:800px; border:0px white solid">
     <tr>
      <td>
       <table style="width:100%; border:0px white solid">
        <tr>
         <td style="text-align:right"><b>Name</b></td>
         <td><input type="text" size="50" name="name" id="name" style="font-family:'Courier New', Courier, monospace" /></td>
        </tr>
        <tr>
         <td style="text-align:right"><b>Line 1 Text</b></td>
         <td><input type="text" size="50" name="line1" id="line1" style="font-family:'Courier New', Courier, monospace" /></td>
        </tr>
        <tr>
         <td style="text-align:right"><b>Line 2 Text</b></td>
         <td><input type="text" size="50" name="line2" id="line2" style="font-family:'Courier New', Courier, monospace" /></td>
        </tr>
       <tr>
        <td style="text-align:right">&nbsp;</td>
        <td><input type="button" value="Make Image" onclick="process()" /></td>
       </tr>
      </table>
     </form>
    </td>
   </tr>
   <tr>
    <td><img src="image.php?name=NAME&line1=Line1&line2=Line2" style="width:369px; height:30px" alt="Example Signature Bar" id="previewImage" /></td>
   </tr>
  </table>

<?php endBox() ?>
<br />
<?php startBox("Step Four: Copy into your signature"); ?>

<p>Now you can copy and paste your sigbar into a forum, blog or your website.</p>
      <table>
       <tr>
        <td style="text-align:right"><b>HTML (for websites)</b></td>
        <td><input type="text" name="urlhtml" id="url" size="50" /></td>
       </tr>
       <tr>
        <td style="text-align:right"><b>BB Code (for most forums)</b></td>
        <td><input type="text" name="urlbb" id="urb" size="50" /></td>
       </tr>
      </table>

script.js:

     function createcolour(colour){
     document.getElementById('previewcolour').src = 'original/'+colour+'.jpg';
     }

     function bold(boldcolour){
     document.getElementById('black').style.fontWeight = 'normal';
     document.getElementById('red').style.fontWeight = 'normal';
     document.getElementById('orange').style.fontWeight = 'normal';
     document.getElementById('yellow').style.fontWeight = 'normal';
     document.getElementById('green').style.fontWeight = 'normal';
     document.getElementById('blue').style.fontWeight = 'normal';
     document.getElementById('purple').style.fontWeight = 'normal';

     document.getElementById(boldcolour).style.fontWeight = 'bold';
     document.getElementById('previewstyle').src = 'original/'+boldcolour+'.jpg';
     document.getElementById('previewtext').src = 'original/'+boldcolour+'.jpg';


     var colour=boldcolour; //doesn't work, needs to make a variable called colour for the next function


     }


     function createstyle(style){
     document.getElementById('previewstyle').src = style+'/black.jpg';
     }

     function select(boldstyle){
     document.getElementById('original').style.fontWeight = 'normal';
     document.getElementById('deepCut').style.fontWeight = 'normal';
     document.getElementById('sineMachine').style.fontWeight = 'normal';

     document.getElementById(boldstyle).style.fontWeight = 'bold';
     document.getElementById('previewImage').src = 'image.php?name=NAME&line1=Line1&line2=Line2&style='+boldstyle+'&colour='+boldcolour;


     var style=boldstyle;  //doesn't work, needs to make a variable called colour for the next function


     }

    function process(){
         function process(){
     var name = document.getElementById('name').value;
     var line1 = document.getElementById('line1').value;
     var line2 = document.getElementById('line2').value;

     var sigbarurl = 'image.php?name='+name+'&line1='+line1+'&line2='+line2+'&colour='+colour+'&style='style;
     var linkurl = 'http://paperhub.x10hosting.com/sigbar/';

     document.getElementById('previewImage').src = sigbarurl

     document.getElementById('urlhtml').value = '<a href="'+linkurl+'"><img src="' + sigbarurl + '" /></a>';
     document.getElementById('urlbb').value = '[img]' + sigbarurl + '[/img]';

     }

I can't work out how to get the variables between statuses

~Callum

[marshian]

It has to do with variables being global or not, but that's not exactly very readable, nor useful...
I *think* something like this should work:

var foo;
function one(bar) {
 foo = bar;
}
function two() {
 alert(foo);
}

Notice the "var foo" in the global scope, and no "var foo" definitions inside the function's scopes!