JS code not running

Question

I have downloaded a note taking app (PHP/css+jquery) and I wanted to hide the div that contains the note pad. I don't know why, but what I write in the js file doesn't affect the site.

This is the js file. Everything works fine, but when I wrote the second line it didn't hide the div at all.

$(function(){

  $('#pad').hide();


  var note = $('#note');

  var saveTimer,
    lineHeight = parseInt(note.css('line-height')),
    minHeight = parseInt(note.css('min-height')),
    lastHeight = minHeight,
    newHeight = 0,
    newLines = 0;

    var countLinesRegex = new RegExp('/n', 'g');

    note.on('input', function(e){
      clearTimeout(saveTimer);
      saveTimer = setTimeout(ajaxSaveNote, 2000);

      newLines = note.val().match(countLinesRegex);

      if(!newLines) {
        newLines = [];
      }

      newHeight = Math.max((newLines.length + 1)*lineHeight, minHeight);

      if(newHeight != lastHeight){
        note.height(newHeight);
        lastHeight = newHeight;
      }

    }).trigger('input');

    function ajaxSaveNote(){
      $.post('index.php', { 'note' : note.val() });
    }



});

Here is the PHP:

<?php

$note_name = 'note.txt';
$uniqueNotePerIP = false;

if($uniqueNotePerIP){

    // Use the user's IP as the name of the note.
    // This is useful when you have many people
    // using the app simultaneously.

    if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
        $note_name = 'notes/'.md5($_SERVER['HTTP_X_FORWARDED_FOR']).'.txt';
    }
    else{
        $note_name = 'notes/'.md5($_SERVER['REMOTE_ADDR']).'.txt';
    }
}


if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
    // This is an AJAX request

    if(isset($_POST['note'])){
        // Write the file to disk
        file_put_contents($note_name, $_POST['note']);
        echo '{"saved":1}';
    }

    exit;
}

$note_content = '

                Write your note here.

             It will be saved with AJAX.';

if( file_exists($note_name) ){
    $note_content = htmlspecialchars( file_get_contents($note_name) );
}

?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Devoirs Communs</title>

        <!-- Our stylesheet -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- A custom google handwriting font -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Courgette" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
      <input type="text">
      <input type="button">
        <div id="pad">
            <h2>Note</h2>
            <textarea id="note"><?php echo $note_content ?></textarea>
        </div>


        <footer>
        </footer>

        <!-- JavaScript includes. -->

        <script src="assets/js/script.js"></script>

    </body>
</html>

Did you clear the browser cache? (Hit ctrl+f5 or manually delete the cache using your browser's menus) — user5051310
– user5051310, Commented Sep 20, 2015 at 20:33
@A.Hat: are you editing the JavaScript file that came with the source code (in assets/js/script.js) or did you create your own js file? — Mark Leiber
– Mark Leiber, Commented Sep 21, 2015 at 11:33

David Rissato Cruz · Accepted Answer · 2015-09-20 14:04:09Z

2

Your REGEXP is wrong.

You need to change this line:

var countLinesRegex = new RegExp('\\n', 'g');

But this is not the only problem. Follow it:

1 - You start hidding the #pad element, and I couldn't see in your code where do you show it again:

$('#pad').hide();

2 - You can't get line height this way. It will return undefined if there's no line-height attribute. Same for min-height:

parseInt(note.css('line-height'))

your should use some plugin to get this behavior the way you want.

3 - And suppose item 2 returned the line-height rightly, it would return something like "10px", or worst, "1.2em". And when you tried to do some math with it, you will get an error or maybe strip unit measures from it.

edited Sep 20, 2015 at 14:04

answered Sep 20, 2015 at 13:50

David Rissato Cruz

3,7272 gold badges21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Alfabravo Over a year ago

How should he change it?

AimiHat Over a year ago

I don't get it. What's wrong with it ? I did the change but it didn't do anything good

David Rissato Cruz Over a year ago

I just edited my response to put additional information.

AimiHat Over a year ago

Ok thanks, so how could i hide the notepad, and then show it again if a condition is fulfilled without messing every thing up

David Rissato Cruz Over a year ago

are you sure your page has found your javascript file? Try to cut and paste your javascript into your main html file just to check.

|

Collectives™ on Stack Overflow

JS code not running

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related