I'm so frustrated with my javascript, I need help

JavaScript
1

I’m doing a final project for a web-design class and my external javascript file doesn’t work. I moved the script tag out of the header and into the body of the index file so I don’t think that’s the problem. I can’t get either an “onclick” or “onblur” event to work in the input bar in the form part of the site without hitting a submit button because we’re not allowed to use a submit button for the project, and I need to find a way to validate the forms without clicking “submit”. I used some inline javascript to change the color of one of the sentences earlier in the site, but it’s just a sentence, it’s not in any of the forms and it doesn’t come from the external javascript file. I’ve been researching this for so long now I don’t know what to do anymore. Somebody please advise…

2

Welcome.

Why can’t you do something like…

<form>
    <input name="name" placeholder="Your Name">
    <button type="button" onclick="myFunction()">Submit</button> <!-- Is is type BUTTON, not type SUBMIT, so technically not a submit button-->
</form>
<script>
    function myFunction(){
        alert("Working! Put your validation code here");
    }
</script>

And for the record, external JS should be called directly before the last closing body tag.

3

The last closing tag of what? The whole body? Or directly before the last HTML closing tag? And that’s just inline javascript. That’s not using the external file anyway.

4

If your code executes code that relies on the page elements being loaded, and the loading line comes before the page elements…like say… if you’re attaching event listeners to elements…

5

Have whoever is conducting the class included debugging and using the console and web tools?
If not, then in my opinion the class is severely limited.
Seeing the code, both html and js would be helpful.

6

The class is severely limited… It’s like an $80 guided independent learning course… I’ve learned more on youtube than I have in the actual class. It’s the foundation for learning though. You gotta start somewhere… I tried to upload a zip file with both sheets of code on here for you to look at and it said “new users cannot upload files”…

7

Hi @afellman84, welcome to the forum :slight_smile:

You can post sample code here.

Just paste it into the textbox, select the code and click on the </> icon in the menu at the top of the text box.

As an alternative you could also use codepen, jsfiddle or similar to show your code.

2 Likes
9 
const fname = document.getElementById("fname")
const lname = document.getElementById("lname")
const age = document.getElementById("age")
const killaliens = document.getElementById("KILL ALL ALIENS!!")
const p2 = document.getElementById("p2")

function myFunction() {
    document.getElementById("color").backgroundColor="blue";
}
    
function myFunction(color){
    alert("Working! Put your validation code here");
}
    

<document.getElementById("color").onclick = function() {myFunction()};
function myFunction() {
    document.getElementById("color").backgroundColor="blue";
}  


document.getElementById("fname").onclick = function() {myFunction()};
function myFunction() {
    document.getElementById("fname").innerHTML="NOW FILL THIS OUT!"
}

fname onblur="myfunction"
function fnamecheck(fname) {
    var string1=document.getElementById.fname
    if (string1===0) {
        alert ("Please Fill In fname!")
        document.getElementById.focus(fname)
    }

    var x = document.getElementById("fname");
    x.addEventListener("focus"), myFocusFunction, true; 
    x.addEventListener("blur"), myBlurFuntion, true;

    function myFocusFunction() {
        document.getElementById("fname").style.backgroundColor="yellow;"
    }
    function myBlurFuntion() {
        document.getElementById("fname").style.backgroundColor="";
    }
    function changestyle() {
        var element = document.getElementById("p2");
        element.style.fontSize="30px";
    }

This is everything in my .js file. What am I doing wrong?

10

ID values (Like found on line 4) cannot contain white space. This may be a cause of errors.

11

  1. Funtion is misspelled.

  2. Don’t put < here:
    <document.getElementById(“color”).onclick = function() {myFunction()};

  3. This line is incomplete:
    fname onblur=“myfunction”

You need to run your script in a JS validator such as:

12

We’re just gonna not mention that he’s defined myFunction four times? :stuck_out_tongue_winking_eye:

13

So, what do you do when you want to have more than one myFunction?

14

the same thing you did here?

1 Like
15

@afellman84

Should be

x.addEventListener("focus", myFocusFunction, true);

Notice all arguments are inside of the brackets.

Can I suggest you have a look at the mdn documentation for addEventListener

MDN is a go to reference site for Javascript and I would say more often than not a google search with a prefix of MDN e.g. ‘mdn addeventlistener’, ‘mdn focus’ will get you to the information you require.

With regards that last argument of ‘true’ which is the capture parameter, the following might help.

Another couple of links that may also be useful.

focus event

https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event

focusin event

https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.