-1

I am baffled by this. I'm working with a WordPress website and I have 2 simple Javascript alert functions. I'm using one of them in the onclick of an image to make sure the script works. All is well if I don't have any empty lines in my script, but if I add any empty lines, nothing works (see the code below for an example).

Javascript and PHP both ignore white space. The only one I'm not sure about is HTML. There's not really much out there on how HTML treats white-space (although I feel like I read somewhere that it ignores it if it's not in an element). Is HTML white-space sensitive (other than in elements)? If not, why would empty lines mess up my scripts? I guess it's not that big of a deal because I can just remove the empty lines, but I would like to make my code neater and find out what's causing this.

Here's an example of my code:

// This works fine because there's no empty lines
<script type='text/javascript'>
        function showAlert() {
            alert("The first showAlert function works!");
        }
        function showAnotherAlert("The other alert is working!");
</script>

// This won't do anything because of the empty lines between the functions
<script type='text/javascript'>
        function showAlert() {
            alert("The first showAlert function works!");
        }

        function showAnotherAlert() {
        alert("The second alert is working!");
        }
</script>

Does anyone have any insight on this?

Don
  • 512
  • 2
  • 8
  • 22
  • 2
    what is `showAnotherAlert`? where is it defined? – Arun P Johny Apr 27 '13 at 05:42
  • 7
    `function showAnotherAlert("The other alert is working!");` is not not a valid syntax in javascript at all. Both examples should be not be working... – Farid Nouri Neshat Apr 27 '13 at 05:43
  • 2
    You forgot to include the exact error you see. "Does not work" is a lousy description. And linebreaks have nothing to do with the issue in the first place. I'd recommend using a static code analysis too like JSHint that points out your syntax errors to you. – Tomalak Apr 27 '13 at 05:45
  • We're all baffled by this – SomeShinyObject Apr 27 '13 at 05:45
  • Line breaks javascript, so after every line use ; and see this, http://stackoverflow.com/questions/4768118/how-to-break-line-in-javascript – web2students.com Apr 27 '13 at 05:45
  • Pardon me for the wrong code sample. That's not how I had it in my page. I guess sitting in front of the computer for about 14 hours will do that to you. :) I fixed the code. It's still the same thing. I literally add an empty line and nothing works. I take it away and everything is fine. – Don Apr 27 '13 at 05:51
  • @ArunPJohny That was supposed to be a function declaration. I fixed it. Sorry about that. – Don Apr 27 '13 at 05:58
  • @Tomalak Thanks for sharing about JSHint. I actually was unaware of it. It seems like a great tool. I'm checking it out. Thanks! I haven't been running it through anything like JSHint. So, I don't have a specific error, but I'll go try it and see what I come up with. – Don Apr 27 '13 at 06:03
  • @web2students.com: I don't think that's related. First of all, there are semicolons in all the expected places in this question. Second of all, JavaScript has Automatic Semicolon Insertion, which is not the problem here. Thirdly and lastly, that question you linked to is talking about newlines in an email body triggered by JavaScript, not newlines in the JavaScript itself. – icktoofay Apr 27 '13 at 06:08
  • @icktoofay I had originally put "line-breaks" in my question when I just meant "empty lines". I edited to make the question clearer. That's where web2students.com got that from. – Don Apr 27 '13 at 06:10
  • @Don: I can see that, but you did supply code, so I assume they would have been able to figure out what you meant from that. – icktoofay Apr 27 '13 at 06:11
  • @icktoofay Lol That's true... :) – Don Apr 27 '13 at 06:14
  • 1
    I have had this issue too. If you inspect the live code on the page you'll notice that wordpress has added

    tags in the place of where your line breaks are. Unfortunately i haven't found a solution yet so thats why im not answering.

     – dev Apr 27 '13 at 07:39
  • Ok. Well, at least I know why it's happening and that I'm not going crazy. ;) It only does when you're writing scripts too? – Don Apr 27 '13 at 07:57
  • @vletech I just wanted to let you know that I did come across a solution. The "p" tags are added by a WP function / filter called `wpautop()`. If you want to disable this, just go into your `functions.php` file and add this: `remove_filter( 'the_content', 'wpautop' );` That fixed the problem for me! The only thing is that, while that filter is removed, you have to manually add "p" tags (which is what I prefer). Please let me know if this works for you too. – Don May 04 '13 at 18:03

1 Answers1

1

Your code should be written as follows ;

<script type='text/javascript'>
    function showAlert() {
        alert("The first showAlert function works!");
    }

    function showAnotherAlert(text) {
        alert(text);
    }
</script>

Using such syntax as function showAnotherAlert("The other alert is working!"); will not be recognized by Javascript as it's not in a valid format. If you wish to pass text to the alert dynamically just pass it via the function as shown in the example above.

Curtis Crewe
  • 3,774
  • 5
  • 25
  • 30