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.

• Celebrombore: After double-clicking the "do"-button, your code snippet worked for me

Answer 1

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();
}

Answer 2

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>

• Duarte Arribas: I copied your code, but it doesn't seem to work in mine?
• Zakaria Acharki: Make sure that you haven't missed something and clear the cache too and retry.

Answer 3

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>