Menu
Newbie for JavaScript here. I tried to write a program that when a user types in "F" in the text, the hidden ball shows up. However, it just does not work. Hope someone could help me out. Thank you in advance. Here 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>
442
I've done 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>Also the issue with your code is that
if(textInput = "F")
needs to be
if(textInput == "F")
as in comparison and you should change
$(this).val().trim.toLowerCase();
to
$(this).val()
When you change the value to lowercase you will never have 'F' for a value, it will always be 'f'.
One more thing, I have used another approach here, not triggering a click event as you have done. I think of this as a much cleaner approach to achieve what you are doing.
74
$(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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
