I am trying to create a page when you input a number and then on a separate page it displays the multiplication of that number up to and including 10. I can get it to display the table on a new page with document.write but with no formatting and still using the same URL as the first. So far I have tried:
window.location.href
location.href
return
Original Page: Assignment2_Input.html
Result Page: Assignment2_Outpul.html
Script: Assignment2Script.js
Any help would be appreciated!
Orginal Page:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Input</title>
<link href="Assignment2InputStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="title">
<h2>Assignment 2</h2>
<h1>Multiplication Table</h1>
<form method="post"><label id="NumberLabel">Please Enter Number: </label><input id="Number" type="text" size="25"></form>
<br/>
<input id="submitButton" type="submit" value="Calculate" >
<p></p>
</div>
</div>
<br/>
<br/>
<script src="Assignment2_Script.js" type="text/javascript"></script>
</body>
</html>
Result Page: (This is the format I am going for on this URL)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Input</title>
<link href="Assignment2InputStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="title">
<h2>Assignment 2</h2>
<h1>Multiplication Table</h1>
<form method="post"><label id="NumberLabel">Please Enter Number: </label><input id="Number" type="text" size="25"></form>
<br/>
<input id="submitButton" type="submit" value="Calculate" >
<p></p>
</div>
</div>
<br/>
<br/>
<script src="Assignment2_Script.js" type="text/javascript"></script>
</body>
</html>
Javascript:
function calculate() {
num = document.getElementById("Number").value;
document.write('<body background-color="aqua">');
document.write('<table border="1" cellspacing="0">');
for(i=1;i<=10;i++) {
document.write("<tr><td>" + num + " x " + i + " = " + num*i + "</td></tr>");
}
document.write("</table>");
}
I now have the code working in Chrome(still does not work in Firefox)
However when it switched to the new page it flashes the table up for a second and then it disappears. Any thoughts?
Related
I am trying to make a simple calculator, that adds 2 numbers together with the press of a button. I have got the HTML part done, but I have no clue how to make the button add the numbers. I have tried using the event listener, but I was probably missing something. If you could, please write the script, while explaining the most important lines of code. Thank you!
<html>
<head>
<title>A calculator... I guess?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main">
<div class="container" style="margin: 100px 200px 0 200px">
<!-- Inputs -->
<p>1st number</p>
<input type="number" id="one">
<p>2nd number</p>
<input type="number" id="two>">
<!-- Button -->
<br>
<br>
<button id="add">Calculate</button>
<!-- Result -->
<p>Result</p>
<input type="text" id="result">
</div>
</div>
<script>
</script>
</body>
</html>
<html>
<head>
<title>A calculator... I guess?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main">
<div class="container" style="margin: 100px 200px 0 200px">
<!-- Inputs -->
<p>1st number</p>
<input type="number" id="one">
<p>2nd number</p>
<input type="number" id="two">
<!-- Button -->
<br>
<br>
<button id="add" onClick={calculate()}>Calculate</button>
<!-- Result -->
<p>Result</p>
<input type="text" id="result">
</div>
</div>
<script>
var elementOne =document.getElementById('one');
var elementTwo =document.getElementById('two');
function calculate(){
one = parseInt(elementOne.value)
two = parseInt(elementTwo.value)
document.getElementById('result').value = one + two;
}
</script>
</body>
</html>
The script is very easy, are u new to JS? The script is here below with explanation as you asked for -
//create the function which will run on button click
function calculate() {
var firstNumber = document.getElementById("one").value; //Get the value of the first input and store it in firstNumber variable
var secondNumber = document.getElementById("two>").value; //Get the second one's now
firstNumber = parseInt(firstNumber); //Convert both variables from string to integer for we get variables if string datatype when getting the value from an input
secondNumber = parseInt(secondNumber);
var result = firstNumber + secondNumber; //Add the 2 numbers and store the result in a variable
document.getElementById("result").value=result; //Print the "result" variable in the input you want it to get printed in
}
<html>
<head>
<title>A calculator... I guess?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main">
<div class="container" style="margin: 100px 200px 0 200px">
<!-- Inputs -->
<p>1st number</p>
<input type="number" id="one">
<p>2nd number</p>
<input type="number" id="two>">
<!-- Button -->
<br>
<br>
<button id="add" onclick="calculate()">Calculate</button> <!--Onclick attribute determines the function to run on click of the element the attribute is in-->
<!-- Result -->
<p>Result</p>
<input type="text" id="result">
</div>
</div>
<script>
</script>
</body>
</html>
I adapted your html to contain a form. Forms are used for user interaction like entering numbers.
<html lang="en">
<head>
<title>A calculator... I guess?</title>
<script src="AddScript.js" rel="script"></script>
</head>
<body>
<div class="main">
<div class="container" style="margin: 100px 200px 0 200px">
<form >
<!-- Inputs -->
<label for="one">1st number</label><br>
<input type="number" id="one" >
<br>
<label for="two">2nd number</label> <br>
<input type="number" id="two">
<!-- Button --><br>
<br>
<button id="add">Calculate</button>
<br>
<br>
<!-- Result -->
<label for="result">Result</label><br>
<input type="text" id="result">
</form>
</div>
</div>
</body>
</html>
and the javascript. You need to use Number() to convert the text to integers
window.onload = init
function init(){
const button = document.getElementById("add")
button.addEventListener("click", addTwoNumbers)
}
function addTwoNumbers(e){
e.preventDefault()
const one = document.getElementById("one")
const two = document.getElementById("two")
const totalSum = Number(one.value) + Number(two.value)
const result = document.getElementById("result")
result.value = totalSum
}
i am trying to take title input and create slug using it. But if the title is not written in English like "আমার প্রথম পোস্ট" then the slug input will remain empty. The code is given below. hope someone can help. Not good at javascript .
document.getElementById("title").addEventListener("keyup", function() {
if (/^[a-zA-Z]+$/.test(this.value)) {
$(document).on('blur', '#title', function(){
var TitleInput = $('#title').val().toLowerCase().trim();
TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '-');
var SlugInput = $('#slug').val(TitleInput);
});
} else {
document.getElementById("show_lang_in_here").innerHTML = "Different language";
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
</body>
</html>
I have modified your code to do what I believe you're after, these are the main changes:
Wait for the document to be loaded with $(document).ready()
I've expanded your regex to allow numbers and spaces as valid English /^[a-zA-Z0-9 ]+$/ (There's a lot more you can add to this, it's quite difficult to detect exactly what is valid English)
You were creating an event listener inside your if, instead of actually executing the code (You can listen for multiple events by including them in the .on('keyup blur') string)
$(document).ready(function() {
$('#title').on('keyup blur', function() {
if (/^[a-zA-Z0-9 ]+$/.test($(this).val())) {
var titleInput = $(this).val().toLowerCase().trim().replace(/[^a-z0-9-]+/g, '-');
$('#slug').val(titleInput);
} else {
$('#show_lang_in_here').text('Different language');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
What you are doing is replacing by -
If you want to remove everything, change it to TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '');
document.getElementById("title").addEventListener("keyup", function() {
if (/^[a-zA-Z]+$/.test(this.value)) {
$(document).on('blur', '#title', function(){
var TitleInput = $('#title').val().toLowerCase().trim();
TitleInput = TitleInput.replace(/[^a-z0-9-]+/g, '');
var SlugInput = $('#slug').val(TitleInput);
});
} else {
document.getElementById("show_lang_in_here").innerHTML = "Different language";
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<center>
<h1>Form</h1>
<form action="" method="post">
<p>Title :</p>
<input id="title" type="text"> <br>
<br>
<p>Slug :</p>
<input id="slug" type="text">
</form>
<div id="show_lang_in_here"></div>
</center>
</body>
</html>
My code is below. Trying to create a simple form for an assignment.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){
var first =
document.forms["formInfo"]["first"].value;
var last =
document.forms["formInfo"]["last"].value;
var applicantInfo = "My first name is " + first + " My last name is " + last ".";
document.getElementById("info").innerHTML = applicantInfo;
}
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>My first name is <input name="first" type="text" id="first" title="first"></p>
<p> My last name is <input name="last" type="text" id="last" title="last"></p>
<p><input type="button" value="Send Information" onClick="getInfo()"></p>
</form>
</div>
<div id="info">
</div>
</body>
</html>
Whenever I press the button in the browser, nothing happens. Where am I going wrong?
There are two mistakes first it's onclick with a small c not onClick.
Second you are missing a + after last
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo() {
var first = document.forms["formInfo"]["first"].value;
var last = document.forms["formInfo"]["last"].value;
var applicantInfo =
"My first name is " + first + " My last name is " + last + ".";
document.getElementById("info").innerHTML = applicantInfo;
}
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>
My first name is
<input name="first" type="text" id="first" title="first" />
</p>
<p>
My last name is
<input name="last" type="text" id="last" title="last" />
</p>
<p>
<input type="button" value="Send Information" onclick="getInfo();" />
</p>
</form>
</div>
<div id="info"></div>
</body>
</html>
This code works, here is the JSFIDDLE
You were simply missing a concatenation operator(+) toward the end of your variable assignment.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){
var first =
document.forms["formInfo"]["first"].value;
var last =
document.forms["formInfo"]["last"].value;
var applicantInfo = "My first name is " + first + " My last name is " + last + ".";
document.getElementById("info").innerHTML = applicantInfo;
};
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>My first name is <input name="first" type="text" id="first" title="first"></p>
<p> My last name is <input name="last" type="text" id="last" title="last"></p>
<p><input type="button" value="Send Information" onClick="getInfo()"></p>
</form>
</div>
<div id="info">
</div>
</body>
</html>
I've got a simple html and JS script, but it doesn't fire the alert message onchange when I enter 2 in the input number field.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("partysize");
if (x==2) window.alert ("You entered" + x);
}
</script>
</head>
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id = "partysize" name="partySize" onchange="myFunction()" >
<br />
<input type="SUBMIT" name="submitButton">
</form>
<br />
</div>
</body>
</html>
ugh, fixed by getting the value of the element:
function myFunction() {
var x = document.getElementById("partysize").value;
if (x==2) window.alert ("You entered" + x);
}
You need to get the value from the input box but in your snippet x is the only dom element. Pass the value to the change handler using this.value. Also parseInt will convert the number value in string to number
function myFunction(x) {
if (parseInt(x, 10) === 2) {
alert("You entered" + x);
}
}
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id="partysize" name="partySize" onchange="myFunction(this.value)">
<br/>
<input type="submit" name="submitButton">
<br />
</div>
</body>
I have a JSP page with a form. I want to submit and return the input to the JSP page. I can't get it to work.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ejemplo</title>
<script type="text/JavaScript" src="Scripts/jquery-1.9.1.js"></script>
<script>
function enviarDatos() {
form = document.getElementById("datos");
form.datoIntroducido.value = "holaaaaaa";
form.submit();
<%System.out.println(request.getParameter("datoIntroducido"));%>
}
</script>
</head>
<body>
<h3>Ejemplo</h3>
<form name="datos" id="datos" action="mypage" method="post" enctype="multipart/form-data">
Escribe aquí: </br>
<textarea cols=50 rows=10 id="texto"></textarea><br />
<input type="hidden" name="datoIntroducido" id="datoIntroducido"/>
<input type="submit" value="Enviar datos" class="btn-primary" onclick="enviarDatos();"/>
</form>
</div>
</body>
</html>
It prints "null" when executing the first time but it doesnt write anything when pressing the button