Spreadsheet formula and result in single text input - javascript

I have been searching for a way to type a formula into a single text input and when I hit the Enter key, the formula executes and the result replaces the formula in the same input box.
Really I want it to function exactly like an Excel cell. https://formulajs.info/functions/ does what I want, except there is a button to click and the result comes back in a separate input box.
I'm learning to write code, so I don't have the skills to reverse-engineer that plugin, and that was the only thing I could find online that was even close. Most of my searches just keep turning up grid spreadsheets with formulas and it is important for me to keep it to a single input.
Does anyone have any ideas of where I might find something already made or how I could make something like that for myself? I don't need all the fancy engineering, financial, etc types. I just want simple math with an option for parentheses to nest formulas, ie 2*6+(8/4) gives a result of 14.

You can try this for simple JavaScript
const input = document.getElementById('formulaInput');
input.addEventListener('keydown', (event) => {
if (event.keyCode === 13) { // Enter key Code
const formula = input.value;
const result = eval(formula);
input.value = result;
}
});

Related

How to create an if else statement when using custom calculatoin script

I am new to using Kofax Power Editor, which uses Javascript, and I am trying to create an if else statement that involves simple calculations. It depends on what the user enters into a textfield box, and then displays it in a separate text field box. Here is the line I wrote:
if (Textfield1 <= 15,000) { Textfield3 = (Textfield1*.05)/12; }
Although, nothing is showing up in Textfield3. I have no clue why.
If anyone would like to help, I am available via phone as well. Or facetime.... because this not making any sense to me.
You have a comma , which is interpreted as comma operator and all checks yields false, because of zero value.
To overcome this, remove the comma.
var Textfield1 = 42,
Textfield3;
if (Textfield1 <= 15000) { Textfield3 = (Textfield1*.05)/12; }
console.log(Textfield3); // undefined

text box that allows computer to recognize letter in the order they appear

I am a fairly new programmer and I am programming a encrypt-er.
so what I need is a text-box that allows the viewer to type the plain text and have the computer recognize which letter came first, second, third, ext......
for example if a viewer typed "test" in the text box. I would need a way for the computer to recognize that "t" came first and distinguish it from the other letters in some way.
what is the best way to do this.
here is the code I have so far
function Encode() {
var myNewEncode = document.getElementById('myTextField').value;
if (myNewEncode.length >= 20) {
alert('text is limeted to 20 charictors');
return;
}
var Encode = document.getElementById('Encode');
Encode.innerHTML = myNewEncode;
}
})
in jQuery:
$(function() {
$('#mytext').keypress(function(evnt) {
console.log(evnt.key)
});
})
in javascript:
document.getElementById("myField").addEventListener("keypress",function(evnt){
console.log(evnt.key);
})
You can try this code it will solve your problem. mytext is your input text box. Each time you type in a character it will evnt.key will return that particular character.

String creation and comparison in Drag n' drop game

I'm trying to make a simple drag and drop game where users need to re order someone's name by dragging characters into a dropping zone.
I'm ok with the drag and drop animations but I'm not being able (mostly due to technical lack of skills) to create strings with this letters in order to make a comparison between both of them.
Check my example code here jsFiddle
I'm creating the first string with the name before I randomize all the letters dragItemsContent = [];
I'm kinda being able to create a new string for letters I'm dragging dragedItemsContent += ui.draggable.text();
But when I wan't to delete any of those letters I can't delete them, and the worst thing is I have no idea how to look for that letter's index and delete it properly from my string.
I'm using data-letra which is a unique indicator for each letter, maybe it can help.
So, to sum up, I need to add/remove letters (or some comparable data) to my strings and compare them to know if the users finish the game correctly.
Thanks
Very fun game.
I have edited it to display You Won! or Sorry. Please try again. based on the results (Spelling out Fredfigglehorn.
Clicky.
The important part is:
var letters = $('.drop-area').find('.drag-item');
if (letters.length == dragItemsLength ) {
var final = '';
for (var i=0;i<dragItemsLength;i++)
final += letters[i].innerText.substring(0, 1);
if (final == 'fredfigglehorn')
alert("You won!");
else
alert("Sorry. Please try again.")
}
Instead of dragedItemsContent += ui.draggable.text(); you should use dragedItemsContent.push(ui.draggable.text()) this way you will get a good array in proper order. Later you can use toString to make your string and to remove simply remove the element from the array
You might also want to check out sortable from jQuery UI which can handle almost everything out of the box
I have made a fiddle for u which does comparison based drag items text hope it helps u.. http://jsbin.com/oluhuk/2/edit

jquery masked input plugin to not clear field when errored

I'm looking at the http://digitalbush.com/projects/masked-input-plugin/
I'm calling it like this:
$(control).mask('999-999-9999');
And I don't want it to throw away the users input if something is wrong, e.g. they haven't finished
[407-555-____]
If you leave the field after having typed this much, it clears it. I'd like to leave it so they can finish later.
I'm new to jQuery, and I've looked through his source, but I can't find any way to do that, nor can I find any way to edit it to accomplish what I want, because the code is arcane to my eyes.
Set autoclear option to false.
$(control).mask('999-999-9999', {autoclear: false});
It looks like I should just make the whole mask optional:
mask('?999-999-9999')
That way the control thinks what the user has is "valid" and I can continue. Even though it isn't really the optional part of the mask.
You should delete statement input.val(""); in checkVal() function for a proper solution.
If you're using minified version, you should search and delete statement:
if(!a&&c+1<i)f.val(""),t(0,k);else
Try update file jquery.maskedinput.js
In function function checkVal(allow) set parameter allow on true. Its help for me.
function checkVal(allow) {
allow = true; ///add this command
//..............
}
In addition to removing the input.val("") in checkVal() you can also change the call to clearBuffer.
In the original code it is: clearBuffer(0, len); removing all user input.
if you change this to clearBuffer(lastMatch + 1, len); the user input will be displayed, followed by the mask placeholders that are still needed to complete correct input.
I have also added a user message in the .bind. This works for us, as we are using the MaskedInput for exactly one type of input. I'm checking for any input going further than position 7, because that's where the user input starts.
Here is what I did:
.bind("blur.mask", function() {
// find out at which position the checkVal took place
var pos = checkVal();
// if there was no input, ignore
if (pos <=7) {input.val(""); clearBuffer(0, len);}
// if the user started to input something, which is not complete, issue an alert
if (pos > 7 && pos < partialPosition) alert("Tell the user what he needs to do.");
if (input.val() != focusText)
input.change();
})
Adding Placeholder could solve the problem.
$(control).mask('999-999-9999');
Add an empty place holder into mask. see below
$(control).mask('999-999-9999', { placeholder: "" });
which would replace _ on the input text field by default. so there would bot be any _ left if the input length is dynamic and not fixed.
Looking for into the pluging script the unmask method.
$('#checkbox').unmask();

Detect return key in textarea and if a certain string is present write a line to textarea [javascript]

Basically have a large textarea, and I want to be able to do a few things with it;
Detect when the user presses "enter" to go to a new line,
and
When enter is pressed, if the line contains a certain string let's say "hello", a line would be written to the textarea that reads "hello to you."
I cannot, for the life of me, detect a string from within a textarea. I am a huge newb, though.
Much obliged.
I would use a JavaScript framework like jQuery for this purpose. The code would look something like this:
$(function() {
$('textarea').keypress(function(event) {
if (event.which == 13) { // Return key
var textareaText = $(this).val();
if (textareaText.match(/hello/)) {
$(this).val(textareaText+"\nhello to you.");
}
}
});
});

Categories

Resources