• 0

Can't implement .js file


Question

Hi,

I only recently started learning and using JavaScript. However I'm having some problems implementing them into my site. I wrote the code, and put it inside the .js file and linked to it properly in the header, and yet it doesn't work. I need to know why and what to do to fix it.

Here's a link to where the methods are being used.

http://people.dsv.su.se/~gora-mak/ip/ip2/9/?page=register

Thanks in advance,

Raz

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

Well as it says in the header I'm trying to implement the .js file. Coz as it is now, it simply doesn't work. If you're wondering what the js is for you could take a look at the code. Basically its suppose to check the value in the text field and if its valid or invalid then a green or red box appears next to it. Right now, nothing happens, which leads me to believe that it simply hasn't implemented the .js file.

P.S. thanks for the heads up, it was quick paste typo.

Link to comment
Share on other sites

  • 0

In functions.js, modify function valCheck().

From:

if(valid == true){
...
elem.style.content = '?';
}else{
...
elem.style.content = 'X';
}

to:

if(valid == true){
...
elem.innerHTML = '?';
}else{
...
elem.innerHTML = 'X';
}

Link to comment
Share on other sites

  • 0

if(elem.style.display == 'none'){elem.style.display = 'block';}

That line isn't working, it isn't changing the display to block, so it's going by the rule in the stylesheet that hides it.

It isn't working because the "style" property only shows the value of the style attribute, not the elements computed style, so by default it's an empty value, so it doesn't match "none" and the code block is never executed. You can fix it by adding 'style="display: block;"' to the definition of the element in the HTML.

Link to comment
Share on other sites

  • 0

Hmm, seems we're missing the big picture

You have a Javascript file with a bunch of functions in it.

It most likely is the invocation of those functions that's not done properly.

You need to read on event handling, registering of event handling functions (take a look at your onkeyup= handler..) both via attributes or DOM manipulation

Once events get handled properly and the correct functions are called (debug with alert('here!'), firebug console is probably too advanced for you) then start worrying about what happens on which event

Use jQuery to achieve cross-browser consistency, easily, gain access to a massive set of ready plugins, learn about patterns and generally acquire Javascript coding skills on par with how most people code Javascript these days

:-)

Link to comment
Share on other sites

  • 0

:-)

Don't panic.

Think about the fact that your functions are maybe perfect. But you need to make something call them.

Maybe it'll help if you tried the following:

onkeyup="myInputKeyUp()"

Then define a new

function myInputKeyUp(){
   alert('key released!');
}

It's best, if you're doing it like this, with

onkeyup="..."

, to only call a function, and put all the code you want to be executed in the function

For your case (validation of an input via Javascript) you better use

onblur="..."

- this event gets called once the input LOSES FOCUS (which is when it makes sense to check if they've entered anything that makes sense :-)

http://api.jquery.com/category/events/ is where you can read on jQuery event handlers.

Basically you don't type

<element id="elementId" onclick="..."

in the body of the page, but, in a Javascript file/block after the element you type

$('#elementId').click(function(){
put your code to be executed on click of the element here
});

trust me it's easy, but you have to think of the basics first - WHEN are you calling, and WHAT FUNCTION, and then put whatever you want in the function (code,including calls to your other functions)

once you have the desired events triggering the desired functions, then you dive into details - what do I want to happen after this event

:-)

Link to comment
Share on other sites

  • 0

The function is being called fine, it's not that.

flip() works because it's got an "else" statement, the first call doesn't match so the "else" block runs setting it to a proper value, the next time it runs it reads the value and continues (so actually just calling flip(elem) would be better)

flip() should fail the first time you call it on an element set to be displayed as block (all it would do is re-set it as a block element), but the next time you call it it'll hit the right value and hide it.

Link to comment
Share on other sites

  • 0

:-)

Don't panic.

Think about the fact that your functions are maybe perfect. But you need to make something call them.

Oh, well I kinda already took care of all that. Onkeyup works just fine. I've used it before on javascript code that was directly embedded in the html file.

The function is being called fine, it's not that.

flip() works because it's got an "else" statement, the first call doesn't match so the "else" block runs setting it to a proper value, the next time it runs it reads the value and continues (so actually just calling flip(elem) would be better)

flip() should fail the first time you call it on an element set to be displayed as block (all it would do is re-set it as a block element), but the next time you call it it'll hit the right value and hide it.

Yeah I used to have that problem, but it works fine now coz the box starts off invisible and appears when something is clicked.

Still, I wish the other functions would work.

Link to comment
Share on other sites

  • 0

Oh, well I kinda already took care of all that. Onkeyup works just fine. I've used it before on javascript code that was directly embedded in the html file.

Yeah I used to have that problem, but it works fine now coz the box starts off invisible and appears when something is clicked.

Still, I wish the other functions would work.

Which particular function do you want to be called, and isn't called ? On what event ?

Link to comment
Share on other sites

  • 0

valCheck... its supposed to make the invisible box appear... Sorry, I thought that was obvious by looking at what I said and what the code reads.

Link to comment
Share on other sites

  • 0

valCheck... its supposed to make the invisible box appear... Sorry, I thought that was obvious by looking at what I said and what the code reads.

replace

if(elem.style == "display: none;"){elem.style = "display: block;";}

with

elem.style.display = 'block';

The_Decryptor was correct - the function does get called, but sadly it fails to make the element visible :-)

The change above should do it.

Link to comment
Share on other sites

  • 0

Well it does indeed work now so thanks a lot. Just feel a little weird having it having to do that every time. But I'll get over it. Thanks again :)

Link to comment
Share on other sites

  • 0

Well it does indeed work now so thanks a lot. Just feel a little weird having it having to do that every time. But I'll get over it. Thanks again :)

:-)

you could take a look at jQuery - supports mega-powerful CSS selectors, including pseudo-classes, also chaining..

instead of

function valCheck(valid, marker){
    var elem = document.getElementById(marker);
    elem.style.display = "block";
    if(valid == true){
        elem.style.background = '#00ff00';
        elem.style.color = '#00aa00';
        elem.innerHTML = 'û';
    }else{
        elem.style.background = '#ff0000';
        elem.style.color = '#aa0000';
        elem.innerHTML = 'X';
    }
}

you could do

function valCheck(valid, marker){
    if(valid)
        $('#'+marker).css({background:'#00ff00',color:'#00aa00',display:'block'}).html('û');
    else
        $('#'+marker).css({background:'#ff0000',color:'#aa0000',display:'block'}).html('X');
}

P.S. Selecting only the hidden marker div is done like that

$('#'+marker+':hidden').show(); //shows it too :-)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.