Ok, so here's my script...I can't get it to output the length of the string though! Please help, I'm a complete noob when it comes to Javascript, this is for a college class. Thanks!
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
/*
Purpose of script: report length of string given by user
*/
"use strict";
function stringLength()
{
var str=(document.StringLength.string);
var n=str.length;
document.StringLength.answerBox.value=length;
}
//Get string from user
//Output to user
</script>
</HEAD>
<BODY>
<form name = StringLength>
Enter Your String <input type = "text" name = "string">
<br>
Length <input type = "text" name = "answerBox">
<input type = "button" onclick = "stringLength()" value = "Run">
</BODY>
</HTML>
You need to check the length of the value of the string input box
function stringLength(){
var str=document.StringLength.string.value;
var len=str.length;
document.StringLength.answerBox.value=len;
}
See this JSFiddle for a demo.
You may try like this:
var x = document.getElementById('yourinput');
var y = document.getElementById('characters');
x.onkeyup = function() {
y.innerHTML = x.value.length;
}
JSFIDDLE
function stringLength()
{
var str=(document.StringLength.string);
var n=str.length;
document.StringLength.answerBox.value = n ;
}
Can you try this one, you have not ended form tag properly
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
/*
Purpose of script: report length of string given by user
*/
function stringLength()
{
document.StringLength.answerBox.value=document.StringLength.string.value.length;
}
//Get string from user
//Output to user
</script>
</HEAD>
<BODY>
<form name ="StringLength" >
Enter Your String <input type = "text" name = "string">
<br> Length <input type = "text" name = "answerBox">
<input type = "button" onclick = "stringLength()" value = "Run">
</form>/*encloded form tag here*/
</BODY>
</HTML>
Related
I got a input number into a var. I subtracted it to a number.
Thank you vicodin for helping me! I fixed it and it works! (I changed names for my program)
<!DOCTYPE html>
<html>
<body>
<p></p>
<span><input type="number" id="guess1"><p id="g1s"></p></span>
<input type="button" onclick="Calculate()" value="Calculate">
<script>
function Calculate() {
var GuessCon1 = document.getElementById("guess1").value;
var GuessCon1sub = GuessCon1 - 500;
document.getElementById("g1s").innerHTML = GuessCon1sub;
}
</script>
</body>
</html>
You assigned a string "numb1" to variable g. If you want to get the value of the input, you need to find that element (e.g. with document.geElementById method) and take a value from it.
Also, you want to trigger calculation, for example by a button click. I added a code in a snippet, you can run it and play around with it to get the idea.
var button = document.getElementById("substract")
button.onclick = function() {
var g = document.getElementById("numb1").value
var a = 578;
var x = g - a;
document.getElementById("demo").innerHTML = x;
}
<input type="number" id="numb1">
<input type="submit" id="substract">
<p id="demo"></p>
Related links:
Input Text value Property
onclick event
Hi I am NewBee in Javascript. This is my second week.
Below is the code that has a form with three input fields.
The relationship of the fields is:
the second field is twice the value of the first field
the third field is the square of the first field
I have managed to do the above but i am not able to do the below :
If a user enters a value in the second or third field, the script should calculate the appropriate value in the other fields. Currently the code works well ONLY if I enter the value in the first field.
I hope I explained well in other words : how do I enter say 144 in the last textbox and the other 2 textboxes show 12 and 24 respectively. Or If I enter 24 first and first and the third text boxes show 12 and 144.
Thanks
Vipul
<html>
<head>
<script>
window.onload = init;
function init() {
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
function doMath(){
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMath()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= doMath()>
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= doMath()> <br><br>
</form>
</body>
</html>
take a look at the code below:
<html>
<head>
<script>
window.onload = init;
var init = function(){
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
}
var doMathbase = function(){
console.log('here');
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
var doMathBase2Time = function(){
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value;
var base = document.getElementById("base").value = (baseNumber_timesTwo/2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMathbase()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= "doMathBase2Time()">
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= "doMathBaseSquare()">
<br><br>
</form>
</body>
You need to bind another function to the second and third field. I did it to the second. Now if you entered a number in the second field it return the 'base' number and the square of the base.
Try do it for the third :)
This should fit your needs:
Fiddle
//declaring those earlier saves you to get those by ID every
//time you call "doMath()" or something else
var base = document.getElementById("base");
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo");
var baseNumber_square = document.getElementById("baseNumber_square");
function clearUp() {
base.value = "";
baseNumber_timesTwo.value = "";
baseNumber_square.value = "";
}
function doMath() {
//check which of the fields was filled
if(baseNumber_timesTwo.value){
base.value = baseNumber_timesTwo.value / 2;
}
if(baseNumber_square.value){
base.value = Math.sqrt(baseNumber_square.value);
}
//fill other fields according to that
baseNumber_timesTwo.value = (base.value*2);
baseNumber_square.value = (base.value*base.value) ;
}
As you see: There is no need to write more than one arithmetic function if you make sure that only one value is given at the time of evaluation (this is achieved by the cleanUp()
method)
However there are still some flaws in this solution! Since you are a js beginner I would suggest you to read the code and think about possible solutions for those problems as a little exercise :-)
- You cannot enter a 2 (or more) digit number in any field, why not? What do you have to change in order to allow such numbers as input?
- Why is it better (in this case!) to set the values to " " instead of '0' in the cleanUp function? Why does the code break when you try using '0' instead of "" ?
- Why does doMath() only check for values in the last two field (baseNumber_timesTwo and baseNumber_square) while ignoring the 'base' field?
Greetings, Tim
I have text box.
Users can enter Student Id into that.
Student id is in this format DIP0001.
First three letters should be DIP and the remaining 4 digits should be numeric and can only upto 4 characters.
So how can I check whether entered data is in this format using javascript.
Please help.....
You could build a regular expression pattern and test it against that value to see if it matches that exact pattern.
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<label for="studentId">Student ID</label>
<input id="studentId" type="text">
<button id="btn" type="button">Validate</button>
// Embedded script so that you don't have to load an external file
<script>
var input = document.getElementById('studentId');
var btn = document.getElementById('btn');
var pattern = /DIP+\d{1,3}/g;
btn.addEventListener('click', function(){
if(pattern.test(input.value)) {
alert('It enter code here`atches!');
}else {
alert('It does not match!');
}
});
</script>
</body>
</html>
JS FILE:
// This pattern looks something like this: DIP0000
var pattern = /DIP+\d{1,3}/g;
// studentId is the ID of the input field that contains the Student ID
var studentIdInput = document.getElementById('studentId');
// Check the pattern against the provided Student ID
if(pattern.test(studentIdInput.value)) {
alert('It matches the pattern!');
}
EDIT 1: I have built the functionality in the following JSFiddle: http://jsfiddle.net/vldzamfirescu/QBNrW/
Hope it helps!
EDIT2: I have updated the JSFiddle to match any other combinations up to 4 digits; check it out: http://jsfiddle.net/vldzamfirescu/QBNrW/1/ Let me know if it solved your problem!
try this code
<html>
<head>
<script>
function validate(val) {
if (val.value != "") {
var filter = /^[DIP]|[dip]+[\d]{1,4}$/
if (filter.test(val.value)) { return (true); }
else { alert("Please enter currect Student Id"); }
val.focus();
return false;
}
}
</script>
</head>
<body>
<input id="Text1" type="text" onblur="return validate(this);" />
</body>
</html>
Use Regular Expresions.
If found a valid Student ID, the pattern will return true:
function validateStudentId(id) {
var re = /DIP[0-9]{4}/;
return re.test(id);
}
// Edited for use with a click event:
document.getElementById('button').addEventListener('click', function(){
if( validateStudentId(document.getElementById('textBox').value) ){
alert('correct');
}else{
alert('invalid ID');
}
});
I am working on javascript.
Consider two textboxes tb1 and tb2 respectively
The value present in tb1 should be copied in tb2 based on a condition. If the condition is true nothing needs to be copied. If the condition is false the value in tb1 should also be initialised to tb2. Is it possible..
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<span>tb1:</span>
<input id="tb1" type="text" value="TextBox Value 1"/>
</div>
<div>
<span>tb2:</span>
<input id="tb2" type="text" value="TextBox Value 2"/>
</div>
<input type="button" onclick="exchange()" value="Exchange">
<script type="text/javascript">
function exchange(){
var tb1 = document.getElementById('tb1');
var tb2 = document.getElementById('tb2');
var condition = function(){
return true;
};
if(condition()){
var buf = tb1.value;
tb1.value = tb2.value;
tb2.value = buf;
}
}
</script>
</body>
</html>
Here's a function that can do what you need:
function compareAndCopy() {
var tb1 = document.getElementById("tb1");
var tb2 = document.getElementById("tb2");
if (tb1.value == "hey") {
tb2.value = tb1.value;
} else {
alert("No match");
}
}
//Add a handler
document.getElementById("tb1").onblur = compareAndCopy;
It is currently checking if tb1 equals hey on blur.
Working demo: http://jsfiddle.net/4L5pE/
yes, this is possible. You need to define when you want it to happen. onkeypress, or onblur of first text box you can call a function that validates your condition and then copies the values.
tb1.onblur(function(){ if(condition) tb2.value = tb1.value }
the code above will not work, its just a pseudo.
I'm developing this webapp for my school. The page is supposed to filter entries by the URL parameter "class". This works fine as far as I can tell, but when I try to change the filter it gives:
"TypeError: object is not a function".
What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<TITLE>Cancelled lessons</TITLE>
</head>
<body>
<script>
function filter(text){
text = text.toLowerCase();
for (i=0;i<lessonList.length;i++){
if(lessonList[i].innerHTML.toLowerCase().indexOf(text)==-1){
lessonList[i].style.display = "none";
}
else{
lessonList[i].style.display ="";
}
}
}
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
<form>
Filter: <input type="text" id="filter" oninput="filter(document.getElementById('filter'))"/>
</form>
<div id="lessons">
<div class="entry"> MaA 11:00 C131 Ej NV3C</div>
</div>
<script>
var lessonList = document.getElementsByClassName("entry");
var filterField =document.getElementById("filter");
filterField.value = gup("class");
filter(filterField.value);
</script>
</body>
</html>
It looks like the "oninput" handler calls the filter function from the scope of the form (document.forms[0]) rather than globally. If you check the value of document.forms[0].filter it'll return the input tag. You just need to make sure that the function name is different than the input name/id.
This also means you don't need to get the input field by id every time, it's already scoped as this
<input type="text" id="filterField" oninput="filter(this.value)"/>
The problem you have is that your text input and your function share a common name. Try renaming as follows
<input type="text" id="filterText" oninput="filter(document.getElementById('filterText'))"/>
There are still some problems with your code, but I'll leave those for you to figure out, given this is a school assignment ;-)
See if this solves your problem
<html>
<head>
<TITLE>Cancelled lessons</TITLE>
</head>
<body>
<script>
function fltr(text){
text = text.toString().toLowerCase();
for (i=0;i<lessonList.length;i++){
if(lessonList[i].innerHTML.toLowerCase().indexOf(text)==-1){
lessonList[i].style.display = "none";
}
else{
lessonList[i].style.display ="";
}
}
}
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
<form>
Filter: <input type="text" id="filter" oninput="fltr(document.getElementById('filter'))"/>
</form>
<div id="lessons">
<div class="entry"> MaA 11:00 C131 Ej NV3C</div>
</div>
<script>
var lessonList = document.getElementsByClassName("entry");
var filterField =document.getElementById("filter");
filterField.value = gup("class");
fltr(filterField.value);
</script>
</body>
</html>
Explanation:
You named a function with the same name of the input text-box id.
When I changed the name of the function, it stopped the error.