All of this code here works perfectly fine, I just want to make it more easy for the user by allowing him/her to just hit the Enter to execute the function, instead of having to click the div activating the moneyFunction().
Heres my code:
<!DOCTYPE html>
<html>
<head>
<title> YearlyDough </title>
<link type="text/css" rel="stylesheet" href="money.css">
</head>
<body>
<p id="header"> Enter yearly income </p>
<input type="text" id="textmoney">
<div onclick="moneyFunction()" id="moneydiv"> <p id="divtext">Calculate</p> </div>
<p id="demo"></p>
<p id="liar"></p>
<div onclick="reloadFunction()" id="reload"> Redo </div>
About
<script>
function moneyFunction() {
var money = document.getElementById('textmoney').value;
var dailyE = money/365;
document.getElementById('demo').innerHTML = ("$" + dailyE + " " + "per day");
if ( document.getElementById('textmoney').value == 0) {
document.getElementById('demo').innerHTML = "ERROR";
}
if ( document.getElementById('textmoney').value > 100000000000) {
document.getElementById('liar').innerHTML = "I know you aint make that much.";
} else {
document.getElementById('liar').innerHTML = "";
}
}
function reloadFunction() {
location.reload();
}
</script>
</body>
</html>
var inp = document.getElementById("textmoney");
inp.addEventListener("keydown", function (e) {
if (e.keyCode === 13) { //checks whether the pressed key is "Enter"
moneyFunction();
}
});
$('.div').click()
Inside your keydown event will call the onclick if you have jquery included on the page.
Related
I copied a multi-search script from a website, I changed only what it told me to. Then I saved as an HTML file and ran in Chrome. But when I enter a word and hit enter, nothing happens. I know nothing about computers, so I don't know where to begin
Doesn't run on Explorer or Firefox either
<!DOCTYPE html>
<html>
<head>
</head>
<body style=”background-color:grey”>
<p>What German word would you like to multisearch? Type below, then press enter please.</p>
<input type=”text” id=”boxu” autofocus>
<script>
document.getElementById(“boxu”).onkeydown = function(e) {searchy(e)};
function searchy(e)
{
if (e.which == 13)
{
var q = document.getElementById(“boxu”).value;
window.open(“http://translate.google.com/translate?hl=en&sl=de&tl=en&u=http%3A%2F%2Fwww.google.de%2Fsearch%3Fq%3D” + q + “%26num%3D10%26hl%3Dde%26tbo%3Dd%26site%3Dimghp%26tbm%3Disch%26sout%3D1%26biw%3D1075%26bih%3D696”);
window.open(“http://www.forvo.com/word/” + q + “/#de”);
window.open(“https://de.wiktionary.org/wiki/” + q);
document.getElementById(“boxu”).value = “”;
}
}
</script>
</body>
</html>
Try the code below-
Include the onkeydown function inside the textbox input. When inside the script the function isn't getting called.And as a comment suggests you are using the wrong "". Fixed that too.
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:grey">
<p>What German word would you like to multisearch? Type below, then press enter please.</p>
<input type="text" id="boxu" autofocus onkeydown="searchy(event)">
<script>
function searchy(e)
{
console.log(e)
if (e.keyCode == 13)
{
console.log("a");
var q = document.getElementById("boxu").value;
window.open("http://translate.google.com/translate?hl=en&sl=de&tl=en&u=http%3A%2F%2Fwww.google.de%2Fsearch%3Fq%3D" + q + "%26num%3D10%26hl%3Dde%26tbo%3Dd%26site%3Dimghp%26tbm%3Disch%26sout%3D1%26biw%3D1075%26bih%3D696");
window.open("http://www.forvo.com/word/" + q + "/#de");
window.open("https://de.wiktionary.org/wiki/" + q);
document.getElementById("boxu").value = "";
}
}
</script>
</body>
</html>
i want to display an confirm box with two button yes and no, when user press yes than index page will be displayed and when user press no this redirect to another page. this confirm msgbox display only once when first time website open not on every reloading of page. Thanks
you can try this code
<script>
var confirm = confirm("sample message?");
if(confirm) {
// index page
window.location.url = ""; // your url index page
} else {
// other page
window.location.url = ""; // your url other page
}
</script>
You have to do all stuff in javascript.
Javascript Function you can use.
Also you need to set cookie at browser and check if cookie is set.
function myFunction() {
var x;
if (confirm("Press a button!") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
Hope this helps.
function myFunction() {
var txt;
var r = confirm("Press a button!");
if (r == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<html>
<head>
<title>Are you sure?</title>
<script>
function areYouSure() {
var res = confirm("Are you sure?");
return res; //true or false
}
</script>
</head>
<body>
<form method="POST" action="action_page.php">
<!--
...
-->
<input type="submit" onclick="return areYouSure()"/>
</form>
</body>
</html>
I am having a problem in my code, I made a very simple newbie type captcha using Javascript the following is the my code.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Testing captcha</h1>
<hr>
<img id="firstImage" img src="pictureOne.jpg">
<input type="text" id="firstInput"></input>
<button type="button" onclick="checker()">Confirm</button>
<hr>
<p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p>
</body>
<script>
function checker() {
var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg'
var takePic = document.getElementById('firstInput').value;
checkPic.toString()
if (checkPic === "pictureOne" && takePic === 'c' ) {
document.getElementById('firstImage').src = 'pictureTwo.jpg';
alert("Please confirm the second captcha");
} else if (checkPic === 'pictureTwo.jpg' && takePic === 'u') {
alert("Ready to download.")
}
}
</script>
</html>
How the captcha will work? Well i tried to make it simple, just like on completing the first captcha the second image will appear and then after finishing that captcha a certain task will be shown. The issue is that the code is not working. I don't know if my condition statements have problem or what so ever please help me. I am stuck in this like for 7 hours.
you have several problems in you code. I first try to fix this problems.
remove unused attribute img from <img id="firstImage" img src="pictureOne.jpg">
remove = 'pictureOne.jpg' from var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg' to get the real content of element #firstImage instead of setting it every time to pictureOne.jpg
remove line checkPic.toString(). Its not needed (and missing a ; at the end)
use == instead of === because === will test if both sides are the same thing and not only equal. Example: define i=5 and x=5 --> i==x is true but i===x is false and i===i is true
use .endsWith(" to compare your image locations because they will start with http://xyz.abc/ and you only have to check the end
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Testing captcha</h1>
<hr>
<img id="firstImage" src="pictureOne.jpg">
<input type="text" id="firstInput"></input>
<button type="button" onclick="checker()">Confirm</button>
<hr>
<p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p>
</body>
<script>
function checker() {
var checkPic = document.getElementById('firstImage').src;
var takePic = document.getElementById('firstInput').value;
if (checkPic.endsWith("pictureOne.jpg") && takePic == 'c' ) {
document.getElementById('firstImage').src = 'pictureTwo.jpg';
alert("Please confirm the second captcha");
} else if (checkPic.endsWith('pictureTwo.jpg') && takePic == 'u') {
alert("Ready to download.")
}
}
</script>
</html>
Now we can talk about the CAPTCHA or is your question already solved?
Try this, you are using the full url of the image, which is not always the same as "pictureOne.jpg", you need get the substring of the url from the end.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Testing captcha</h1>
<hr>
<img id="firstImage" src="pictureOne.jpg">
<input type="text" id="firstInput"/>
<button type="button" onclick="checker()">Confirm</button>
<hr>
<p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p>
</body>
<script>
function checker() {
alert(123);
var checkPic = document.getElementById('firstImage').src;
var takePic = document.getElementById('firstInput').value;
checkPic = checkPic.substring(checkPic.lastIndexOf('/')+1);
if (checkPic === "pictureOne.jpg" && takePic === 'c') {
document.getElementById('firstImage').src = 'pictureTwo.jpg';
alert("Please confirm the second captcha");
} else if (checkPic === 'pictureTwo.jpg' && takePic === 'u') {
alert("Ready to download.")
}
}
</script>
</html>
I've have tried alot of different ways with removing the child and nothing has worked so faar, well it has to some degree, either i have no messages or i keep getting message that just add to the span without deleting the other
Tried reading up on how to remove the child, and have tried every different ways i've found to remove it, my code might be wrong on creating the child and append it etc. since it's the first time i use this way. Been trying with a while loop to remove, and the one that is already outcommented in the code, and with firstChild. and with different names instead of msg.
My code looks like this in my script:
function validateName(input, id)
{
var res = true;
var msg = document.getElementById(id);
var error = document.createElement("span");
var errorMsg = "";
if (input == "" || input < 2) {
res = false;
// removeChildren(msg);
errorMsg = document.createTextNode("Input is to short!");
error.appendChild(errorMsg);
id.appendChild(error);
}
if (input >= 2 && input.match(/\d/)) {
res = false;
// removeChildren(msg);
errorMsg = document.createTextNode("Name contains a number!");
error.appendChild(errorMsg);
id.appendChild(error);
}
if (input >= 2 && !input.match(/\d/)) {
res = true;
// removeChildren(msg);
}
return res;
}
My small test page:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="Validator.js"></script>
<script>
function v1(e,id) {
if(validateName(document.form1.namefield.value, id) == false) {
document.getElementById("be").src="NotOkSmall.jpg";
}
if(validateName(document.form1.namefield.value) == true) {
document.getElementById("be").src="OkSmall.jpg";
}
}
</script>
</head>
<body>
<h1>Validation testing, HO!</h1>
<form name="form1" action="submit">
<div id="div1">
<input type="text" name ="namefield" id="f1" onkeydown="v1(be, div1)" >
<image id="be" src="NotOkSmall.jpg" alt="OkSmall.jpg" />
</div>
<input type="button" value="GO" onClick="v1(be)">
</form>
</body>
</html>
If anyone have any ideas to make it work I for one, would be a very happy guy :), as i have said before i am not even sure the creation of child is the correct way in this case. but as it works when i have removed removeChildren, it does write the correct messages, just dont delete any of them. So something must work..
Thanks.
You had some errors in your code like id.appendChild(error); where you had to use msg.appendChild(error);. Anyway I don't see a need to append/remove child nodes in this case. Just use hidden error placeholder and show it when you want to display an error message.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP Page</title>
<script src="Validator.js"></script>
<script>
function v1(imgId) {
var img = document.getElementById(imgId),
val = document.form1.namefield.value;
img.src = img.alt = validateName(val)
? "OkSmall.jpg"
: "NotOkSmall.jpg";
}
</script>
</head>
<body>
<h1>Validation testing, HO!</h1>
<form name="form1" action="submit">
<div id="div1">
<input type="text" name ="namefield" id="f1" onkeyup="v1('be');" >
<image id="be" src="NotOkSmall.jpg" alt="NotOkSmall.jpg" />
<span id="error-message" class="invis"></span>
</div>
<input type="button" value="GO" onClick="v1('be');">
</form>
</body>
</html>
CSS:
.invis {
display: none;
}
JavaScript:
function validateName(input) {
var res = true,
errorMsg,
errorContainer = document.getElementById('error-message');
if(input.length < 2) {
res = false;
errorMsg = "Input is to short!";
}
if(input.length >= 2 && /\d/.test(input)) {
res = false;
errorMsg = "Name contains a number!";
}
if(res) {
errorContainer.style.display = 'none';
} else {
errorContainer.innerHTML = errorMsg;
errorContainer.style.display = 'inline';
}
return res;
}
DEMO
I have a text box that can allow the users to hit enter. When they hit enter I check the input and replace the carriage return with \n. However it still sends to my database a carriage return.
What could be wrong?
Here is the code:
var pp = comment.value;
alert(pp.replace(/\r?\n|\r/g, "\n"));
comment.value = pp.replace(/\r?\n|\r/g, "\n");
and in my database I still get carriage return character even though I am replacing it.
If you set an onsubmit handler on your form, you'll be able to change the contents of the textarea element before sending it. You can then use the replace method to change every \r to \n:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Replace carriage returns in textarea</title>
</head>
<body>
<form id="theForm">
<textarea id="theTextarea" name="txtarea" rows=10 cols=50></textarea>
<input type="submit" value="Send">
</form>
<script>
function replace_newlines() {
var textField = document.getElementById("theTextarea");
var textString = textField.value;
textField.value = textString.replace(/\r/g, "\n");
}
document.getElementById("theForm").onsubmit = replace_newlines;
</script>
</body>
</html>
Here is an example that does it in pure javascript, but it'd be much cleaner if you were using something like jquery.
<html>
<head>
</head>
<body>
<textarea id='txt'></textarea>
<script type='text/javascript'>
var txtarea = document.getElementById('txt');
txtarea.onkeypress = keyHandler;
function keyHandler(e){
if (document.all) { e = window.event; }
if (document.layers || e.which) { pressedKey = e.which; }
if (document.all) { pressedKey = e.keyCode; }
if(pressedKey == '13'){
txtarea.value = this.value + '\\n';
return false;
}
}
</script>
</body>
</html>