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';


     [COLOR="Red"][B]var colour=boldcolour; //doesn't work, needs to make a variable called colour for the next function[/B][/COLOR]


     }


     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;


     [B][COLOR="Red"]var style=boldstyle;  //doesn't work, needs to make a variable called colour for the next function[/COLOR][/B]


     }

    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='+[B][COLOR="Red"]colour[/COLOR][/B]+'&style='[B][COLOR="Red"]style[/COLOR][/B];
     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 = '[url="'+linkurl+'"][img]' + sigbarurl + '[/img][/url]';

     }

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!

 

[callumacrae]

var colour;
var style;

     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';


     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;
     style=boldstyle;  //doesn't work, needs to make a variable called colour for the next function
     }

    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 = '[url="'+linkurl+'"][img]' + sigbarurl + '[/img][/url]';
     }

They end up being "Undefined"

~Callum
Edit:

var colour = "black";

     function bold(boldcolour){

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



     function createstyle(style){
     alert(colour);
     }

The alert says black

 

[descalzo]

var colour = "black";
 
     function bold(boldcolour){
 
     colour = "blue"; //boldcolour; //doesn't work, needs to make a variable called colour for the next function
     }
 
 
 
     function createstyle(style){
     alert(colour);
     }

The alert says black

If you call bold() first, then call createstyle(), the alert will say "blue", otherwise, the alert will say "black"

 

[callumacrae]

It always says black

~Callum

 

[descalzo]

It always says black

~Callum

Can you give an url where this is the case? What you are describing is not how JavaScript works.

 

[callumacrae]

http://paperhub.x10hosting.com/sigbar

Would it be easier to assign the values to hidden inputs?

~Callum

 

[descalzo]

http://paperhub.x10hosting.com/sigbar



~Callum

That URL does not show any alerts.

 

[callumacrae]

Oh sorry forgot about that

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

~Callum

 

[descalzo]

     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';
 
     LOCATION OF THE PROBLEM...
 
     document.getElementById('previewtext').src = 'original/'+boldcolour+'.jpg'; 
  
     THERE IS NOTHING ON THE PAGE WITH ID 'previewtext'
     SO
     THE ABOVE LINE THROWS AN ERROR
     SO THE LINE BELOW IS NEVER EXECUTED
 
     colour=boldcolour; //doesn't work, needs to make a variable called colour for the next function
 
 
     }

Found why colour was not being changed.

 

[misson]

You can also use a closure, which avoids polluting the global namespace.

var SigbarGen;

(function (currColourElt, currStyleElt) {
    SigbarGen = {
    createColour: function (colour){
            document.getElementById('previewcolour').src = 'original/'+colour+'.jpg';
        },

    selectColour: function (colourElt){
            currColourElt.style.fontWeight = '';
            currColourElt = colourElt;
            currColourElt.style.fontWeight = 'bold';
            
            document.getElementById('previewstyle').src = 'original/'+boldcolour+'.jpg';
            previewSig();
        },

    createStyle: function (style){
            document.getElementById('previewstyle').src = style+'/black.jpg';
            alert(currColourElt.id);
        },
    
    selectStyle: function (styleElt){
            currStyleElt.style.fontWeight = '';
            currStyleElt = styleElt;
            currStyleElt.style.fontWeight = 'bold';
            
            previewSig();
        },

    previewSig: function(name, line1, line2) {
            name = name || 'NAME';
            line1 = line1 || 'Line1';
            line2 = line2 || 'Line2';
            var sigbarURL = 'image.php?name='+name+'&line1='+line1+'&line2='+line2+'&style='+currStyleElt.id+'&colour='+currColourElt.id;
            document.getElementById('previewImage').src = sigbarURL;
            return sigbarURL;
    },
    process: function (){
            var name = document.getElementById('name').value;
            var line1 = document.getElementById('line1').value;
            var line2 = document.getElementById('line2').value;
            
            var sigbarurl = previewSig(name, line1, line2);
            var linkurl = 'http://paperhub.x10hosting.com/sigbar/';
            
            document.getElementById('urlhtml').value = '<a href="'+linkurl+'"><img src="' + sigbarurl + '" /></a>';
            document.getElementById('urlbb').value = '[COLOR="Black"][[/COLOR]url='+linkurl+'[COLOR="Red"]][/COLOR][img]' + sigbarurl + '[/img]\[/url]';
        }
    };
})(document.getElementById('black'), document.getElementById('original'));

The page's code had a missing right bracket in the last line of process (shown above in red).

The above code can't be evaluated before the color and style pickers are defined. The simplest way of ensuring this is to place the <script> tag at the bottom of the page.

To invoke the functions, call them on the SigbarGen object, passing in the target rather than the target's ID. For example,

   <a class="colour" id="black" 
      onMouseOver="SigbarGen.createColour(this)" onclick="SigbarGen.selectColour(this)"
      style="font-weight:bold">Black</a> - 
   <a class="colour" id="red" 
      onMouseOver="SigbarGen.createColour(this)" onclick="SigbarGen.selectColour(this)"
      >Red</a> -

 

[callumacrae]

WIN for descalzo

Thanks everyone

I didn't rep someone cos I didn't have enough rep, who was it?

~Callum