All geek questions in one place

Try to fire an event in javaScript using userinput

New to JavaScript here. I tried to write a program that when the user enters the text "F" in the text, a hidden ball appears. However, this simply does not work. Hope someone can help me. Thanks in advance. Here are my html, css, js below: -

$(document).ready(function() {
	    $('#input').on('keyup', function(){
		    var textInput = $(this).val().trim.toLowerCase();
		    if(textInput = "F") {
			    $('#F2').trigger('click');
		    }
	    });
	    $('#F2').on('click', function() {
		    $('#F2').show();
	    });
    });
 #F2{
   	    width: 10px;
	    height: 10px;
	    background: #ccc;
	    border: 2px solid #ccc;
	    border-radius: 50%;
    }

    .not_shown {
	    display: none;
     }
 <!DOCTYPE html>
    <html>
    <head>
        <link type="text/css" rel="stylesheet" href="code.css">
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="code_js.js"></script>
    </head>
    <body>
	    <div id = "ball">
		    <input type="text" id="input">
		    <div id = "F2" class = "not_shown"></div>
	    </div>
    </body>
    </html>
Run codeHide result
+4
source share
4 answers

I did it here. Hope this helps.

// if you do not care whether the 'F' is capital or simple
/*$('#input').keydown(function(e) {
  if (e.keyCode == '70') {
    $('#ball').addClass('shown');
  } else {
    $('#ball').removeClass('shown');
  }
});*/

// if you care whether 'F' is capital or simple
$('#input').keyup(function() {
  if ($('#input').val() == 'F') {
     $('#ball').addClass('shown');
  } else {
    $('#ball').removeClass('shown');
  }
});
.ball {
  background-color: red;
  border-radius: 100%;
  height: 50px;
  width: 50px;
  margin-top: 50px;
  display: none;
}

.ball.shown {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="input" type="text">
<div id="ball" class="ball"></div>
Run codeHide result

Also the problem with your code is that

if (textInput = "F")

should be

if (textInput == "F")

both in comparison and you have to change

$ (this) .val () trim.toLowerCase () ;.

to

$ (this) .val ()

, "F" , "f".

, , , . , .

+4

, var textInput = $(this).val().trim();

$(document).ready(function() {
    $('#input').on('keyup', function(){
        var textInput = $(this).val().trim();
      console.log(textInput)
        if(textInput == "F") {
            $('#F2').trigger('click');
        }
    });
    $('#F2').on('click', function() {
        $('#F2').show();
    });
});
#F2{
    width: 10px;
    height: 10px;
    background: #ccc;
    border: 2px solid #ccc;
    border-radius: 50%;
}

.not_shown {
    display: none;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="code.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="code_js.js"></script>
</head>
<body>
    <div id = "ball">
        <input type="text" id="input">
        <div id = "F2" class = "not_shown"></div>
    </div>
</body>
</html>
Hide result
+3

$(document).ready(function() {
    $('#input').on('keyup', function(){
        var textInput = $(this).val().trim();
        if(textInput == "F") {
          console.log(1);
            $('#F2').trigger('click');
        }
    });
    $('#F2').on('click', function() {
        $('#F2').show();
    });
});
#F2{
    width: 10px;
    height: 10px;
    background: #ccc;
    border: 2px solid #ccc;
    border-radius: 50%;
}

.not_shown {
    display: none;
 }
<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="code.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</head>
<body>
    <div id = "ball">
        <input type="text" id="input">
        <div id = "F2" class = "not_shown"></div>
    </div>
</body>
</html>
Hide result
+3

1) ; if F

2) .

if(textInput == "f")

if.

+1

Source: https://habr.com/ru/post/1661329/

More articles:


All Articles