How can i get the latest inputs I entered in order. For example:
I declared an array with 20 elements and when I input something I delete the first element of the array and add at the end the input I just entered.
So when I press the upArrow button the last element of the array will appear as the new input. If I press one more time the upArrow I want my input to change to my second last element and so on.
It doesn't work in my jsfiddle link. It outputs another element from the array.
var singleValues;
var theInputsNumber = 19;
var latestInputs = new Array(20);
latestInputs.fill("Latest");
function clickMe(){
singleValues = $( "#input" ).val();
var c = latestInputs.shift();
latestInputs.push(singleValues);
$( "#output" ).append( singleValues);
$("#input").prop('value', '');
}
$(document).on('keypress',function(e) {
$('#input').bind('keydown', function(e) {
if (e.which === 38) {
$("#input").prop('value', latestInputs[theInputsNumber]);
theInputsNumber--;
}
});
if(e.which == 13) {
theInputsNumber=19;
clickMe();
}
});
<!DOCTYPE html>
<html>
<head>
<title>Think Fast Trivia</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jqueryScript.js"></script>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="output" class="item1"></div>
<input autofocus type="text" name="input" id="input" />
<button id="send" onclick="clickMe()">Send</button>
</body>
</html>
You've missed the idea that you must determine (logic test) the value of the counter (theInputsNumber) in order to reset at the top (and the bottom) of the stack.
I renamed theInputsNumber counter and provided the UP key and DOWN key feature. I also did not limit the array size to 20 as that won't make a difference anyway (array size is not restricted in size as it is in other languages).
EDIT (based on comment): I've placed everything within the HTML so you can save this content into an HTML file and open with your browser. It will work just fine with no server.
<!DOCTYPE html>
<html>
<head>
<title>Think Fast Trivia</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="output" class="item1"></div>
<input autofocus type="text" name="input" id="input" />
<button id="send" onclick="clickMe()">Send</button>
<script>
var counter = 0;
var latestInputs = [];
function clickMe() {
let input = $("#input").val();
latestInputs.push(input);
$("#input").prop('value', '');
}
$('#input').bind('keydown', function(e) {
if (e.which === 38) {
$("#input").prop('value', previous());
} else if (e.which == 40) {
$("#input").prop('value', next());
} else if (e.which == 13) {
clickMe();
}
});
function previous() {
counter = (counter === 0) ? latestInputs.length - 1 : --counter;
return latestInputs[counter];
}
function next() {
counter = (counter === latestInputs.length - 1) ? 0 : ++counter ;
return latestInputs[counter];
}
</script>
</body>
</html>
it looks like your function on upArrow was triggered multiple times (3) every time you pressed that key, I moved it outside of the "keypress" binding and it stays on its own, and the problem no longer exists when i run the code
var singleValues;
var theInputsNumber = 19;
var latestInputs = new Array(20).fill("Latest");
function clickMe() {
singleValues = $("#input").val();
latestInputs.shift();
latestInputs.push(singleValues);
theInputsNumber = 19;
$("#output").append(singleValues);
$("#input").prop("value", "");
}
$(document).on("keypress", function (e) {
if (e.which === 13) {
clickMe();
}
});
$("#input").bind("keydown", function (e) {
var x = e.which || e.keyCode;
if (x === 38) {
$("#input").prop("value", latestInputs[theInputsNumber--]);
if (theInputsNumber === -1) {
theInputsNumber = 19;
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>Think Fast Trivia</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jqueryScript.js"></script>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="output" class="item1"></div>
<input autofocus type="text" name="input" id="input" />
<button id="send" onclick="clickMe()">Send</button>
</body>
</html>
Related
I have an idea to create multiple inputs from single input and get their all values. But I can only get the first input value but not the rest. Can someone tell me how to do it?
const singleInput = document.getElementById('singleInput')
const demo = document.getElementById('demo')
const demo2 = document.getElementById('demo2')
const multipleInputValue = []
singleInput.addEventListener('keyup', function (event) {
if (event.key == 'Enter') {
demo2.innerHTML += singleInput.value + '<input
type="number"
class="multipleInput" onkeyup="getValue(event)">' +
'<br>'
multipleInput =
document.getElementsByClassName('multipleInput')
}
})
function getValue(event) {
if (event.key == 'Enter') {
multipleInputValue.push(multipleInput[0].value)
}
}
And here's the HTML Code for this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Coding</title>
</head>
<body>
<input type="text" id="singleInput">
<div id="demo">
<p id="demo2"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Your getValue function (bound to onkeyup event of the input appended at runtime) was trying to get the value of the input with multipleInput[0].value but no piece of code was pushing values to that array.
A better approach was to just using event.target to retrieve the object firing the event from the event handler itself.
I showed here a simplified demo of your code showing that concept.
When you press enter on the first input, the second one will appear.. after then if you press keys inside that new input, a console.log will show the activity, including when you'll press enter (and the value will be pushed to the array).
But the overall logic wasn't pretty clear so I couldn't go any further
const multipleInput = [];
const singleInput = document.getElementById('singleInput');
singleInput.addEventListener('keyup', function (event) {
if (event.key == 'Enter') {
console.log('singleInput: pressed ENTER');
const inputElement = event.target;
const target = document.getElementById('target');
target.innerHTML +=
inputElement.value +
'<input type="number" class="multipleInput" onkeyup="getValue(event)"><br>';
}
});
function getValue(event) {
console.log(`Key was pressed for the new created input: ${event.key}`);
if (event.key == 'Enter') {
console.log(`The value pushed to the array is: ${event.target.value}`);
multipleInput.push(event.target.value)
}
}
.multipleInput{
margin-bottom: 1rem;
margin-left: 1rem;
}
#singleInput{
margin-bottom: 2rem;
}
<input type="text" id="singleInput">
<div id="target">
</div>
Here is my code!!!
I have one input field And
One of the array
I'm matching Input field entered value with arrray's list.
Prob : Unable to match capital value with array's list.
e.g if user enter one10 value so this one should be match or if user enter ONE10 in capital letter then this value should be match too.
function myFunctiontwo(){
var good = [
"one10",
"two10",
"three10"
];
var a = document.getElementById("code").value.split(' ');
var foundPresent = a.some(elem => good.indexOf(elem) > -1);
if(foundPresent === true){
alert("correct");
}else {
alert("wrong");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input name="code" id="code" placeholder="code" required>
<button id="submit" id="sumbit" onclick="myFunctiontwo()">GO</button>
</body>
</html>
You can use the toLowerCase() method here. Assuming all your elements in good are lowercase you can just do elem.toLowerCase()
var foundPresent = a.some(elem => good.indexOf(elem.toLowerCase()) > -1);
When not you also should convert the array elements toLowerCase()
good = good.map(x => x.toLowerCase());
In the snippet below I added the element "FOur20" to the array.
As you can see four20 will give you the message correct
function myFunctiontwo(){
var good = [
"one10",
"two10",
"three10",
"FOur20"
];
good = good.map(x => x.toLowerCase());
console.log(good);
var a = document.getElementById("code").value.split(' ');
var foundPresent = a.some(elem => good.indexOf(elem.toLowerCase()) > -1);
if(foundPresent === true){
alert("correct");
}else {
alert("wrong");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input name="code" id="code" placeholder="code" required>
<button id="submit" id="sumbit" onclick="myFunctiontwo()">GO</button>
</body>
</html>
Let's first make sure the good array is all lowercase:
good = good.map(word => word.toLowerCase());
Then, you can always convert to lowercase and check if it exists in the good array
var foundPresent = a.some(elem => good.contains(elem.toLowerCase()));
if(foundPresent === true) {
alert("correct");
}
else {
alert("wrong");
}
I want to know how to detect if a textbox does not contain certain words. For example if the textbox did not contain 'who', 'what', 'why', 'when' or 'where' some sort of function would run.
JavaScript:
function command() {
var srchVar = document.getElementById("srch");
var srch = srchVar.value;
var t = srch;
if (srch == '') {
alert('Please do not leave the field empty!');
}
else if (srch.indexOf('time') != -1) {
alert('The current time according to your computer is' + ShowTime(new Date()));
}
else if (srch.indexOf('old are you') != -1) {
alert("I am as old as you want me to be.");
}
else {
if (confirm('I am sorry but I do not understand that command. Would you like to search Google for that command?') == true) {
window.open('https://google.co.uk/#q=' + srch, '_blank');
}
else { /* Nothing */ }
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<input class="search-field" id="srch" onkeypress="searchKeyPress(event);" placeholder="ask me anything" spellcheck="false">
</div>
</body>
</html>
You will want to call that function when you press a button.
Try something in your HTML like:
<input class="info" onclick="contains();" type="button">
And in your JS
function contains() {
var srchVar = document.getElementById("srch");
var srch = srchVar.value;
if (
(srch.indexOf('who')==-1) &&
(srch.indexOf('what')==-1) &&
(srch.indexOf('why')==-1) &&
(srch.indexOf('when')==-1) &&
(srch.indexOf('where')==-1)
) {
alert("That is not a question");
}
}
You will want to merge this with your command() function in the future.
Also, what does info(); do ?
Ok so, what I need to do is change some numbers on the screen when keys are pressed, i have it working but I'm not happy with it.
I have a input field and a div that is being updated when the value of the input filed changes. I did that so that I would not be constrained by the input field's blinking carat etc. I don't want to display the input field at all but when I hide it with CSS or type="hidden" it no longer works. I was trying to get this working with JS variables but so far have been unsuccessful.
Any ideas?
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="number.css" />
</head>
<body onLoad="focus();myText.focus();changeNumber()">
<div id='number'>
</div>
<input type="text" id="myText" value="1"/>
</body>
<footer>
<script type="text/javascript" src="number.js"></script>
</footer>
</html>
JAVASCRIPT
var myText = document.getElementById("myText");
function changeNumber(){
var userInput = document.getElementById('myText').value;
document.getElementById('number').innerHTML = userInput;
}
// Capture keyDown events
myText.onkeydown = function(e) {
// "34" is the up arrow key
if (e.keyCode == 34) {
// increment the value in the text input
myText.value++;
changeNumber()
// "33" is the down arrow key
} else if (e.keyCode == 33 && myText.value > 1) {
// decrement the value in the text input
myText.value--;
changeNumber()
}
}
HERE IN THE FINAL FIXED CODE * THANKS GUYS! **
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="number.css" />
</head>
<body onLoad="focus();number.focus();changeNumber()">
<div id='number' value="1">
</div>
</body>
<footer>
<script type="text/javascript" src="number.js"></script>
</footer>
</html>
JAVASCRIPT
var i = parseInt(1);
function changeNumber(){
var userInput = i;
document.getElementById('number').innerHTML = userInput;
}
// Capture keyDown events for document
document.onkeydown = function(e) {
// "34" is the PGUp key
if (e.keyCode == 34) {
// increment the value in the text input
(i++);
changeNumber()
// "33" is the PGDown key
} else if (e.keyCode == 33 && i > 1) {
// decrement the value in the text input
(i--);
changeNumber()
}
// "66" is the b key
if (e.keyCode == 66){
window.location.reload()
}
}
The problem with your code is this:
myText.value--;
and
myText.value++;
myText is a DOM element, and the value property has a string, not an integer, I'd recommend doing:
var i = parseInt(myText.value);
myText.value = (i++);
How do I check if an HTML control exists?
This is my code:
var id = ...
if(document.getElementById(id)!=null)
{
//do something
}
if the html control is radio doesn't work.
How is this done?
Further to your comments above, you should use a unique id for each radio button, but you can use the same name for your radio group. Consider the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Testing document.getElementById()</title>
</head>
<body>
<input type="radio" id="my_radio_1_id" name="my_radios"> My Radio Button 1
<input type="radio" id="my_radio_2_id" name="my_radios"> My Radio Button 2
<script type="text/javascript">
if (document.getElementById('my_radio_1_id')) {
alert('It Exists');
}
</script>
</body>
</html>
It will alert 'It Exists' as expected.
function validate(ValFrm) {
var len = ValFrm.elements.length;
for (i = 0; i < len; i++) {
if (ValFrm.elements[i].required == "Yes") {
if (ValFrm.elements[i].value == "") {
alert('The ' + ValFrm.elements[i].title + ' is required to contain data.');
ValFrm.elements[i].focus();
return false;
}
}
if (ValFrm.elements[i].type == "radio") {
if (!ValFrm.app[0].checked && !ValFrm.app[1].checked) {
alert('Please accept or deny.');
return false;
}
}
}
}