How to use jquery in a function

Question

So I want to hide an input in a function. Here's what I already have:

function doGetWord() {
  var word = F.gword.value;
  var wLength = word.length;
  for (var i = 0; i < wLength; i++) {
    document.getElementById("dword").innerHTML += "_ "
  }

  $(document).ready(function() {
    $("input.cclick").click(function() {
      $("input.cword").hide();
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="F">
  <input type="text" name="gword" class="cword">
  <!--<input type="text" name="t" class="in2">-->
  <input type="button" name="b" value="do" onclick="doGetWord()" class="cclick">
  <div id="dword"></div>
</form>

But it doesn't seem to hide it.

Thanks in advance.

After double-clicking the "do"-button, your code snippet worked for me — Celebrombore
– Celebrombore, Commented Nov 15, 2017 at 11:06

gurvinder372 · Accepted Answer · 2017-11-15 09:48:31Z

2

But it doesn't seem to hide it.

You are binding a document.ready event inside a function, much after this event has been fired already. So these lines are unlikely to be reached

  $("input.cclick").click(function(){
        $("input.cword").hide();
  });

Simply put this

$("input.cword").hide();

without wrapping it in document.ready and click event

function doGetWord(){
    var word = F.gword.value;
    var wLength = word.length;
    for(var i = 0; i < wLength; i++){
        document.getElementById("dword").innerHTML += "_ "  
    }
    $("input.cword").hide();
}

answered Nov 15, 2017 at 9:48

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

Comments

Zakaria Acharki · Accepted Answer · 2017-11-15 09:48:53Z

0

Your code is almost valid you've just to remove the inline event onclick="doGetWord()" since you attach it already form the JS side and call you function on click, then adjust the braces to separate the ready function form the doGetWord function, like :

function doGetWord() {
  var word = F.gword.value;
  var wLength = word.length;
  for (var i = 0; i < wLength; i++) {
    document.getElementById("dword").innerHTML += "_ "
  }

  $("input.cword").hide();
}

$(document).ready(function() {
  $("input.cclick").on('click', doGetWord);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="F">
  <input type="text" name="gword" class="cword">
  <!--<input type="text" name="t" class="in2">-->
  <input type="button" name="b" value="do" class="cclick">
  <div id="dword"></div>
</form>

answered Nov 15, 2017 at 9:48

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

2 Comments

Duarte Arribas Over a year ago

I copied your code, but it doesn't seem to work in mine?

Zakaria Acharki Over a year ago

Make sure that you haven't missed something and clear the cache too and retry.

Lalit Sachdeva · Accepted Answer · 2017-11-15 10:17:02Z

0

Please check the updated code

function doGetWord(){
    var word = F.gword.value;
    var wLength = word.length;
    for(var i = 0; i < wLength; i++){
        document.getElementById("cword").innerHTML += "_ "  
    }  
}

$("input.cclick").click(function(){
          $("input.cword").hide();
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form name="F">
        <input type="text" name="gword" class="cword">
        <!--<input type="text" name="t" class="in2">-->
        <input type="button" name="b" value="do" onclick="doGetWord()" class="cclick">
        <div id="dword"></div>
    </form>

answered Nov 15, 2017 at 10:17

Lalit Sachdeva

6,6612 gold badges22 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to use jquery in a function

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related