strange text NaN keeps appearing in textarea

Question

As the title says I'm trying to append some text to a textarea in html, but the result always has some strange text involving NaN appearing in the textarea... Here is my code:

  <!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
  <?php 

     $_SESSION['currentlocation'] = "combat.php"; 
     ?>
     <script type="text/javascript">
            if(document.getElementById("wrapper") == null) {
              window.location = "../index.php";    
           }
       </script>

<textarea id="combatinfo" rows="4" cols="50"></textarea>
<br />   
<?php
$_SESSION['currentlocation'] = "combat.php";

if($_SESSION['ambush'] && $_SESSION['flee']) {

    for($i = 0; $i < sizeOf($_SESSION['enemies']); $i++) {
        echo $_SESSION['enemies'][$i]->rank;
        $scaling = 20 - $_SESSION['enemies'][$i] -> luck;
        if($_SESSION['enemies'][$i]-> rank >= 20 && $_SESSION['enemies'][$i]-> rank < 40) {

            $prob = rand(1, 100);

            if($prob <= 100) {              
       //                if($prob <= 75 - $scaling * 3.8) {
                if($_SESSION['comboAttack'] < 2) {
                    $_SESSION['comboAttack'] = 2;
                }

                $_SESSION['enemies'][$i]->comboAttack = 2;
              ?>                  
                <script type="text/javascript">
                    $(document).ready(function() {


                         $('#combatinfo').append("HELLO WORLD!");

                    });
                </script>    
        <?php        
            }

        }
        else if($_SESSION['enemies'][i]-> rank >= 40 && $_SESSION['enemies'][i]-> rank < 60) {
            $prob = rand(1, 100);

            if($prob <= 50 - $scaling * 3.8) {
                if($_SESSION['comboAttack'] < 3) {
                    $_SESSION['comboAttack'] = 3;
                }

                $_SESSION['enemies'][i]->comboAttack = 3;
               ?>                    
                <script type="text/javascript">
                    $(document).ready(function() {

                        var str1 = "Enemy ";
                        var str2 = "pulls off a 3-hit combo.\n";
                        var str = str1.concat(str2);

                        $('#combatinfo').append("HELLO WORLD!");
                    });
                </script>
           <?php
            }
            else if($prob <= 75 - $scaling * 3.8) {
                if($_SESSION['comboAttack'] < 2) {
                    $_SESSION['comboAttack'] = 2;
                }

                $_SESSION['enemies'][i]->comboAttack = 2;
           ?>
                <script type="text/javascript">
                    $(document).ready(function() {  
                        var str1 = "Enemy ";
                        var str2 = "pulls off a 2-hit combo.\n";
                        var str = str1.concat(str2);
                        $('#combatinfo').append("HELLO WORLD!");
                    });
                </script>
     <?php                        
            }
        }

        $_SESSION['enemies'][$i] ->attack($i);
    }
 ?>
<button type="button">Defend</button> <button type="button">Flee</button>
<form action="index.php" method="post">
<input type="submit" name="submit" value="Submit" />
</form>
<?php           
}
else if(ambush && !flee) {
?>        
<button type="button">Defend</button> <button type="button">Flee</button> 
<?php
}
if(!ambush && flee) {
?>        
<button type="button">Attack</button> <button type="button">Flee</button>
<?php
}
else if(!ambush && !flee) {
?>        
<button type="button">Defend</button> <button type="button">Flee</button>
<?php     
}
?>
<br />
<select id="selectClone">        
<?php
if(sizeOf($_SESSION['playercharacter'] -> clones) == 0) {
?>
    <script type="text/javascript">
        $(document).ready(function() {
            var dropDownMenu = document.getElementById("selectClone");
            dropDownMenu.disabled = true;
        });
    </script>             
    <option value="Player">Player</option>
<?php        
}
else if(sizeOf($_SESSION['playercharacter'] -> clones) == 1) {
?>
    <option value="Clone 1">Clone 1</option>              
<?php
}
?>            
</select>

<div id="player" class="group">asdf</div>
<div id="clone1" class="group">dsfdsfds</div>    

<script type="text/javascript">
    $(document).ready(function() {
        $('.group').hide();
        $('#player').show();
        $('#selectClone').change(function () {
            $('.group').hide();
            $('#'+$(this).val()).show();
        })
    });
</script>

for some reason in the textarea i get the text "Enemy #NaN" appended onto the text I want. Why is this happening, and how do i stop it from happening?

and you think NaN is strange ? http://stackoverflow.com/questions/3215120/why-javascript-says-that-a-number-is-not-a-number — Twisted1919, Jun 17 '13 at 18:18
NaN usually means that the number you are trying to express is either not a number, or it is an impossible number to calculate. On another note, your code is fairly tough to read. Ideally, your logic and presentation should be separate. While it does indeed work, I feel it is bad practice to use PHP to output JavaScript code. An html file should only contain html, a .js file, only JavaScript, and a PHP file should only have PHP in it. — FireCrakcer37, Jun 17 '13 at 18:51
@FireCrakcer37 I'm having a hard time determining if it's really needed here or not, but I've come across several instances where it is indeed necessary to output JavaScript with PHP. For example, run some calculations during page load (PHP) and manipulate them based on user actions on the loaded page (JS) - the only way is to output them with PHP. — DACrosby, Jun 17 '13 at 20:26
It seems to me that the only thing being appended to the text are is the string `HELLO WORLD!` I may be reading this wrong, but are you sure you have pasted the correct version of your code? — Richard Ye, Jun 17 '13 at 20:38

score 1 · Answer 1 · answered Jun 17 '13 at 20:17

NaN is a special value in Javascript (and other languages). It means "Not A Number".

You will get NaN when you try to do numeric operations on values that are non-numeric. For example, doing a divide between two strings - eg:

console.log("foo" / "bar");
> NaN

or a common one, parseInt() on a variable that is non-numeric:

parseInt("foo");
> NaN

If you then try to display the value, you will get the text NaN being displayed.

NaN itself is a special value, similar to null or undefined, but with its own meaning to the Javascript language.

With the mixture of PHP and JS code in your question, it's very hard to read and find the problem, but I'm sure with the above information, it should be come easier to work out for yourself.

strange text NaN keeps appearing in textarea

1 Answers1