[javascript] document.write() doesn't write!

Discussion in 'Web Design & Coding' started by Glaanieboy, Jul 28, 2004.

  1. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    I was bored, so I decided to make a javascript which replaces words while typing in a textfield. But I also wanted a counter with it, so I used document.write('Replaced words so far ' + counter), where counter is added up each time a word is replaced. The problem is, it doesn't write, not even the text-bit. Here's the code:
    Code:
    <HTML>
    <HEAD>
    <SCRIPT type="text/javascript">
     function checkField(){
     text = document.formname.textfield.value;
     var counter = 0;
     if (text.search('text') != -1){
      text = text.replace('text','bleh');
      counter++;
     }
     document.formname.textfield.value = text;
    }
    </SCRIPT>
    </HEAD>
    
    <BODY>
    
    
    <script type="text/javascript">
    if (!counter OR counter == 0){
     counter = 'none';
    }
    
    document.write('Replaced words so far: '+ counter);
    </script>
    <form name="formname">
    <input type="text" value="" name="textfield" onKeyup="checkField();">
    </form>
    
    </BODY>
    </HTML>
    
    IE (I am at work now, I can't test it with another browser) doesn't give a javascript error, the text is being replaced, yet it doesn't write a thing. I even tried to place a document.write('test'); within the last script brackets, but that doesn't work also, can someone help me?
     
  2. Nick

    Nick OSNN Lurker

    Messages:
    147
    Location:
    North West, UK
    One problem is your declaring counter within the function, so it isn't accessable outside the function. If you want to access it globaly, declare it before the function. A better solution might be to return the value you want rather than use counter globally.

    I'm not quite sure what the problem is but taking out the if statement before the document.write() makes the document.write work. I'm still trying to figure out why.
     
  3. Nick

    Nick OSNN Lurker

    Messages:
    147
    Location:
    North West, UK
    Found the problem. You should be using || rather than 'OR'. It does exactly the same as or would, the only difference is it has a higher operator precedence.
     
  4. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Still doesn't work. I now get an error (translated from Dutch to English):
    Error: Expected object on line 30, char 1
    (which is the <input ... thingy)

    :(
    I also tried making a function (doWrite()) out of the second <script></script>, that was called from the upper script, which in turn brought the counter value (by using doWrite(counter), but still the same error. Is there any freeware javascript/html debugging program available?
     
  5. Nick

    Nick OSNN Lurker

    Messages:
    147
    Location:
    North West, UK
    I haven't come accross any javascript debuggers, doesn't mean there aren't any though.

    I think this code will do what your trying to do:
    Code:
    <HTML>
    <HEAD>
    <SCRIPT type="text/javascript">
     function checkField(){
     var counter = 0;
     text = document.formname.textfield.value;
     if (text.search('text') != -1){
      text = text.replace('text','bleh');
      counter++;
      counterDisp.innerHTML = 'Replaced words so far: ' + counter;
     }
     document.formname.textfield.value = text;
    }
    </SCRIPT>
    </HEAD>
    
    <BODY>
    
    
    <div id="counterDisp">Replaced words so far: None</div>
    <form name="formname">
    <input type="text" value="" name="textfield" onKeyup="checkField();">
    </form>
    
    </BODY>
    </HTML>
    
     
  6. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Your counter stops at 1. I modified it a bit to ensure the counter is either set at 0 or at whatever value it has found in the HTML:
    Code:
    <HTML>
    <HEAD>
    <SCRIPT type="text/javascript">
     function checkField(){
     //check whether the counterDisp value == 'None'
     if (counterDisp.innerHTML == 'None'){
      //if yes, set counter to 0
      var counter = 0;
     }else{
      //if not, set counter to HTML value (this isn't always true, since 'None' isn't a 
      //number, so 'None' + 1 results in an error
      var counter = counterDisp.innerHTML;
     }
     text = document.formname.textfield.value;
     if (text.search('text') != -1){
      text = text.replace('text','bleh');
      counter++;
      counterDisp.innerHTML = counter;
     }
     document.formname.textfield.value = text;
    }
    </SCRIPT>
    </HEAD>
    
    <BODY>
    
    
    Replaced words so far: <span id="counterDisp">None</span>
    <form name="formname">
    <input type="text" value="" name="textfield" onKeyup="checkField();">
    </form>
    
    </BODY>
    </HTML>
    Thanks for the code though, I didn't know how to get the HTML value, now I know :)
     
  7. Nick

    Nick OSNN Lurker

    Messages:
    147
    Location:
    North West, UK
    I made the same misktake I pointed out above, left the counter as a local variable, Doh! If you move it outside the function it works happily.

    I've never actually thought of using .innerHTML to read data from a page, I've only ever used it to write back to a page. It's always interesting to see how other people use snippets of code.
     
  8. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    It's a very handy feature :)
     
  9. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Here's another addition:
    This script checks for bad words which are entered in the textbox and replaces them with ****. These bad words are stored in an array, but can be loaded from a database or sump using PHP. Maybe it can be implemented in this board?
    Code:
    <HTML>
    <HEAD>
    <SCRIPT type="text/javascript">
     function checkField(){
     if (counterDisp.innerHTML == 'None'){
      var counter = 0;
     }else{
      var counter = counterDisp.innerHTML;
     }
     badWords = new Array('bad1','bad2','bad3');
     text = document.formname.textfield.value;
     for (var j = 0 ; j < badWords.length ; j ++) {
      if (text.search(badWords[j]) != -1){
       text = text.replace(badWords[j],'****');
       counter++;
       counterDisp.innerHTML = counter;
      }
    
     }  
     document.formname.textfield.value = text;
     document.formname.textfield.focus();
    }
    </SCRIPT>
    </HEAD>
    
    <BODY>
    
    
    Replaced words so far: <span id="counterDisp">None</span>
    <form name="formname">
    <input type="text" value="" name="textfield" onKeyup="checkField();">
    </form>
    
    </BODY>
    </HTML>
     
  10. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    nice code, but that fetaure is built in to vBulletin :)
     
  11. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    I know, but that first needs parsing in PHP before these words are filtered out. With this javascript, the words are being filtered while typing!
     
  12. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    unless I disable java script :)
     
  13. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    True. But you can just think of this as an extra function, using PHP as a backup for things like this.