<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<title> Exercise 1</title>
<style>
body {
background-image: url("http://www.millionglitters.com/background/thumb/nice/nice-background-pattern-176.gif");
}
label { display : inline-block;
width :140px;
text-align:left;
padding-top:10px;
}
</style>
<script>
function con(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
alert(res);
}
function sub(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res1 = str1.substr(1,4);
var res2 = str2.substr(1,4);
alert(res1+" "+res2);
}
function last(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var str3=document.getElementById("str3").value;
var res = str1.concat(" "+str2);
var n=res.lastIndexOf(str3);
alert(n);
}
function lower(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
var res2=res.toLowerCase();
alert(res2);
}
function upper(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
var res2=res.toUpperCase();
alert(res2);
}
function match(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var str4=document.getElementById("str4").value;
var res = str1.concat(" "+str2);
var res2=res.match(str4);
alert(res2);
}
</script>
</head>
<body>
<h1>String processing Based on methods</h1>
<p><b>concat()</b>
used to join two or more strings.This method does not change
the existing strings, but returns a new string containing the text
of the joined strings.</p>
<p><b>substr()</b>
extracts parts of a string, beginning at the character at the
specified position, and returns the specified number of characters.</p>
<p><b>lastIndexOf()</b>
method returns the position of the last occurrence of a specified
value in a string. This method is case sensitive</p>
<p><b>toLowerCase()</b>
method converts a string to lowercase letters.</p>
<p><b>toUpperCase()</b>
method converts a string to uppercase letters.</p>
<p><b>match()</b>
searches a string for a match against a regular expression, and returns
the matches, as an Array object.</p>
<form>
<fieldset>
<legend><i>Input String</i></legend>
<label for ="str1">Input first Sentence</label>
<input type="text" id="str1" size="25" required><br />
<label for ="str2">Input second Sentence</label>
<input type="text" id="str2" size="25" required><br />
<p><b>The input field below is use for CERTAIN method only</b></p>
<label for ="str3">Choose from sentence a last word</label>
<input type="text" id="str3" size="25" required
placeholder="for lastIndexOf()"><br />
<label for ="str4">Choose a regular expression</label>
<input type="text" id="str4" size="25" required
placeholder="for match()"><br />
<label for ="str5">A word to replace/ Where</label>
<input type="text" id="str5" size="25" required
placeholder="Replace Word, replace()">
<input type="text" id="str6" size="25" required
placeholder="What word to replace, replace()"><br /><br />
<button type="button" onclick="con()">concat()</button>
<button type="button" onclick="sub()">substr()</button>
<button type="button" onclick="last()">lastIndexOf()</button>
<button type="button" onclick="lower()">toLowerCase()</button>
<button type="button" onclick="upper()">toUpperCase()</button>
<button type="button" onclick="match()">match()</button>
<button type="button" onclick="replace()">replace()</button>
<button type="button" onclick="split()">split()</button>
<button type="button" onclick="charCodeAt()">charCodeAt()</button>
<button type="button" onclick="slice()">slice()</button>
</fieldset>
</form>
</body>
</html>
I'm planning to write the codes of all JavaScript method as above. It is a good behavior of writing the codes like this?. I'm thinking why don't i put all method in one function. Is that possible?
Just asking...and I'm a beginner. Thanks for helping
Related
How do I properly count the amount of replaced strings in Javascript. my increment function is in the replacement part of replace function bellow gives me a "0". i am not sure if the problem lies with the function or the way i called it. thanks in advance
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
<script>
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=(inp.replace(regexp,rv,function(x){count+=1;return"1"}))
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
</script>
</body>
</html>
you are using replace function in wrong way . there is only two arguments allowed for this
one = search term
two = string or function
if you are using function for replace value then you have to return whatever value you wanted to replace into that function and thats it
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=inp.replace(regexp,x => {
count++;
return rv;
})
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
</body>
</html>
This will work for you. Cheers :)
function newrep() {
let temp = document.getElementById("message").value;
var fid = document.getElementById("find").value;
var regexp = new RegExp(fid, "gi");
var rv = document.getElementById("replace").value;
var inp = document.getElementById("message").value;
var count = 0;
// Additional condition, when find is empty
if (!fid) {
document.getElementById("ChCtr").innerHTML = count;
return;
}
// corrected your useage of replace function
let str2 = inp.replace(regexp, function () {
count += 1;
return rv;
});
update(str2, count);
}
function update(msg, count) {
document.getElementById("message").value = msg;
document.getElementById("ChCtr").innerHTML = count;
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br /><br />
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br /><br />
Replace:<br />
<input type="text" id="replace" name="replace" size="30"><br />
<br /><br />
<button onclick="newrep()">Find and Replace</button>
<br /><br />
</main>
</body>
</html>
How do I make this calculator display the result on the first page after the ='s sign without destroying all of the html on the page with document.write()?
I know that document.write() is the problem, but I don't know of anything else to use. I'm very new to coding, so any help is greatly appreciated.
I also have a problem with the division part because it is putting the result right next to the remainder, however, once the document.write() problem is resolved, I think that the solution should become more apparent. Thank You!
<head>
<script language="javascript" type="text/javascript">
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.write(result);
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.write(result)
document.write(remainder)
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.write(result);
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.write(result);
}
</script>
<title>java</title>
</head>
<body>
Addition
<p>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
</p>
<p>
Subtraction
<p>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<p>Multiplication
<p>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
</p>
<p>Division
<p>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
</p>
</body>
</html>
You can either use textContent or innerHTML.
Here's an example using textContent:
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.getElementById('add-result').textContent = result;
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.getElementById('divide-result').textContent = result;
document.getElementById('divide-remainder').textContent = remainder;
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.getElementById('multiply-result').textContent = result;
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.getElementById('subtract-result').textContent = result;
}
<div>
<h1>Addition</h1>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
<span id="add-result"></span>
</div>
<div>
<h1>Subtraction</h1>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<span id="subtract-result"></span>
</div>
<div>
<h1>Multiplication</h1>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
<span id="multiply-result"></span>
</div>
<div>
<h1>Division</h1>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
<span id="divide-result"></span> |
<span id="divide-remainder"></span>
</div>
With textContent you can only set text, with innerHTML you can set HTML:
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.getElementById('add-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.getElementById('divide-result').innerHTML = `<i style="color: blue">${result}</i>`;
document.getElementById('divide-remainder').innerHTML = `<i style="color: blue">${remainder}</i>`;
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.getElementById('multiply-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.getElementById('subtract-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
<div>
<h1>Addition</h1>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
<span id="add-result"></span>
</div>
<div>
<h1>Subtraction</h1>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<span id="subtract-result"></span>
</div>
<div>
<h1>Multiplication</h1>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
<span id="multiply-result"></span>
</div>
<div>
<h1>Division</h1>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
<span id="divide-result"></span> |
<span id="divide-remainder"></span>
</div>
It's worth noting, with innerHTML there are security concerns as mentioned here:
...there are ways to execute JavaScript without using elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example:
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
For that reason, it is recommended that you do not use innerHTML when inserting plain text; instead, use Node.textContent. This doesn't parse the passed content as HTML, but instead inserts it as raw text.
Here are some other methods used to manipulate the DOM:
insertAdjacentElement
innerText
insertAdjacentHTML
insertAdjacentText
insertBefore
appendChild
replaceChild
removeChild
nodeValue
outerHTML
outerText
remove
See the full list here.
As you have discovered, document.write() is tricky because it has a tendency to overwrite the existing content when used. Let's see what the documentation has to say about it:
Note: Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document.
Hmm, well what else can we do? Fortunately, it is possible to target specific parts of the page and replace content in those elements only. So, for example we could add <span> elements with ids like #add-result, #div-result etc to the page which will contain the results of their respective action. Then, instead of using document.write() to output the results, we can replace the content in those elements.
Let's add a <span> to contain our add result:
Addition<p>
<input type="text" id="t1" name="t1" /> +
<input type="text" id="t2" name="t2" />
<input type="button" id="add" value="=" onClick="add();" />
<span id="add-result></span>
</p>
(Note: remember to close your <input /> tags with a />!)
How do we target a specific element? With document.querySelector(). Docs
Then, we can easily change the content inside of that element by updating the element.textContent property, just like you would a variable:
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1+input2;
// get the element with the #add-result ID
var element = document.querySelector("#add-result");
// update the content in that element
element.textContent = result;
}
Now when you add two numbers together and press =, the result will appear inside of the <span id="add-result"></span> element instead of overwriting the entire page. See if you can get it working for the other inputs as well. Remember you will need a unique id for each element you want to display a result in, and update the calculation functions accordingly!
I'm new to JavaScript and I need to use the string method all in one html page. I need to make sure user input the data, but I can't get my function calling to work. Any idea? I finished all of it, but just to make sure that one button submit can validate all string method function perfectly.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<h1> Try 1</h1>
<p>Please enter all the field below.</p>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>String Methods</legend>
<p>Using concat()</p>
<input type="text" id="word1" size="25" placeholder="Enter first word/sentences."></br>
<input type="text" id="word2" size="25" placeholder="Enter second word/sentences."></br></br>
<p>Using substr()</p>
<input type="text" id="subtr" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using lastIndexOf()</p>
<input type="text" id="lastindex" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="srch" size="25" placeholder="Word that you want to search."></br></br>
<p>Using toLowerCase()</p>
<input type="text" id="lcase" size="35" placeholder="Please enter Uppercase word/sentences."></br></br>
<p>Using toUpperCase()</p>
<input type="text" id="ucase" size="35" placeholder="Please enter Lowercase word/sentences."></br></br>
<p>Using match()</p>
<input type="text" id="match" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="match1" size="25" placeholder="Words that you want to find match."></br></br>
<p>Using replace()</p>
<p id="phrase"><i>The voice in my head shouts out through the world like a breath.</i></p>
<input type="text" id="replce" size="35" placeholder="Word you want to change in sentence above."></br>
<input type="text" id="replce2" size="25" placeholder="Word you want to change with."></br></br>
<p>Using split()</p>
<input type="text" id="splt" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using charCodeAt()</p>
<input type="text" id="cca" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using slice()</p>
<input type="text" id="slce" size="25" placeholder="Please enter word/sentences."></br></br>
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything()">
</fieldset>
</form>
<div id="answers"></div>
</body>
</html>
This is my JavaScript code:
<script>
function validateEverything(){
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var lin = document.getElementById("lastindex").value;
var sea = document.getElementById("srch").value;
var lca = document.getElementById("lcase").value;
var uca = document.getElementById("ucase").value;
var mat = document.getElementById("match").value;
var ma1 = document.getElementById("match1").value;
var phr = document.getElementById("phrase").value;
var rep = document.getElementById("replce").value;
var re1 = document.getElementById("replce1").value;
var ph1 = document.getElementById("phrase1").value;
var spl = document.getElementById("splt").value;
var cha = document.getElementById("cca").value;
var slc = document.getElementById("slce").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
//lastindexof
var n = lin.lastIndexOf(sea);
//toLowerCase
var lc = lca.toLowerCase();
//toUpperCase
var uc = uca.toUpperCase();
//match
var mc = mat.match(ma1);
//replace
var rp = phr.replace(replce, replce1);
//split
var sp = sp1.split(" ")
//charCodeAt
var cc = cha.charCodeAt(0);
//slice
var sl = slc.slice(1, 5);
show();
}
function show(){
ans.innerHTML = answersHTML();
}
//answers
function answersHTML(){
var ans = document.getElementById("answers").innerHTML;
document.write(con);
document.write(subr);
document.write(n);
document.write(lc);
document.write(uc);
document.write(mc);
document.write(rp);
document.write(sp);
document.write(cc);
document.write(sl);
}
</script>
There are multiple issues in your snippet.In some case there is no DOM element present but still you are doing document.getElementById();
Also how answerHTML will know about con,sub,.... ? They are local to validateEverything function & you are not passing it to answerHTML function
You are using input type = "submit". You need to use event.preventDefault() to stop submission. You are not submitting anything. Rather use input type = "button"
There is also no use of show() function
Everytime you are using document.write, so it will delete anything which is previously written. Instead string concatenation and innerHTML will be fine.
Here is a working snippet with minimum code.
JS
function validateEverything(event){
event.preventDefault();
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
ans.innerHTML = con+" "+subr;
}
HTML
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything(event)">
JSFIDDLE
Write a script that inputs an integer code for a character and displays the corresponding character.
It should print in a paragraph.
function character() {
var input = document.getElementById( "input" );
var code = document.getElementById( "output" ).innerHTML = input;
output.value = String.fromCharCode( code );
}
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
A P is not a form element. Also if you use form.fieldName, you need to use name="" instead of id=""; otherwise use document.getElementById for all fields and ignore the form.
You need to use innerHTML or innerText/textContent for a paragraph
document.getElementById("output").innerHTML=...
function character() {
var form = document.getElementById("form");
var code = parseInt(form.input.value,10); // radix 10 to make decimal
document.getElementById("output").innerHTML = String.fromCharCode(code);
}
<form id="form">
<input name="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
</form>
You have the problem for access to the elements inside a form.
document.getElementById("form").elements['input']
But this only works with form elements, not with other HTML elements.
In this of elements, you can use id or name but for historical reasons.
You have another way here:
function character() {
var input = document.getElementById("input"),
output = document.getElementById("output");
output.innerHTML = String.fromCharCode(parseInt(input.value), 10) || '';
}
<form id="form">
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
</form>
Here, this works:
<script>
function character() {
var ChrCode = document.getElementById("input").value;
document.getElementById("output").innerText = ChrCode + " = " + String.fromCharCode(ChrCode);
//output.value = String.fromCharCode( code );
}
</script>
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" >Output</p>
sir
i have 7 text boxes .1st two take values from user and display the multiplication result on 3rd text box when it clicked.4th and 5th textboxes also take values and display the multiplication result in 6th text box when it clicked.now 7th textbox will display the addition result when it clicked.7th textbox takes the values from 3rd and 6th textbox.
my problem is that i can not do the addition and cant display the result in 7th text box in html and jscript.plz help me.....i am attached the code...
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt1(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt').value = gt1;
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt1()" id="gt1"/>
</form>
</html>
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt1').value = gt1;
}
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt()" id="gt1"/>
</form>
</html>
use this code it is working. and compare with own code. thanks..
There are several problem
1). Element id is one line is incorrect. It should be:
document.getElementById('gt1').value = gt1;
2). result variable is undefined. It should be:
if (!isNaN(gt1))
3). onclick="gt1()" will not work (because there is id with the same name gt1). Use, for example:
function getText3() { ... }
and
<input type="text" onclick="getText3()" id="gt1"/>
Fiddle.
Update. Ok, I didn't notice that you want multiplication, but somewhy had written + in getText1() and getText2() functions. Then you should also replace these two + with *:
Multiplication fiddle.
You dont have element with id 'gt'.
Change last line of code to this:
document.getElementById('gt1').value = gt1;
You have not defined 'result' variable
and in 'gt1()' :
document.getElementById('gt').value = gt1;
1- There is no 'gt' element in the page
2- 'gt1' should renamed to 'result'
and at the end code will be:
<script language="javascript" type="text/javascript">
function getText1() {
var in1 = document.getElementById('in1').value;
var in2 = document.getElementById('in2').value;
var tot1 = parseInt(in1) + parseInt(in2);
document.getElementById('tot1').value = tot1;
}
function getText2() {
var in1 = document.getElementById('in3').value;
var in2 = document.getElementById('in4').value;
var tot2 = parseInt(in1) + parseInt(in2);
document.getElementById('tot2').value = tot2;
}
function gt1() {
var in1 = document.getElementById('tot1').value;
var in2 = document.getElementById('tot2').value;
var result = parseInt(in1) + parseInt(in2);
if (!isNaN(result)) {
document.getElementById('gt1').value = result;
}
//document.getElementById('gt1').value=gt1;
}
</script>
this is work properly.
Check the below code.
<script >
function getext3(){
txt1 = document.getElementById("text1").value;
txt2 = document.getElementById("text2").value;
document.getElementById("text3").value = parseInt(txt1)*parseInt(txt2);
}
function getext6(){
txt1 = document.getElementById("text4").value;
txt2 = document.getElementById("text5").value;
document.getElementById("text6").value = parseInt(txt1)*parseInt(txt2);
}
function getext7(){
txt1 = document.getElementById("text3").value;
txt2 = document.getElementById("text6").value;
document.getElementById("text7").value = parseInt(txt1)+parseInt(txt2);
}
</script>
Text1 : <input type="text" id="text1" value="5"> <br/>
Text2 : <input type="text" id="text2" value="2"> <br/>
Text3 : <input type="text" id="text3" value="" onclick="getext3()"> <br/>
Text4 : <input type="text" id="text4" value="7"> <br/>
Text5 : <input type="text" id="text5" value="10"> <br/>
Text6 : <input type="text" id="text6" value="" onclick="getext6()"> <br/>
Text7 : <input type="text" id="text7" value="" onclick="getext7()"> <br/>