Empty or reset entire array with button

Empty or reset entire array with button - javascript

This is my script might be easier to explain if yas can see it, im tring to reset the array with a button
<body>
<script type="text/javascript">
var number = [];
function myFunction()
{
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add to list"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:scroll">
</div>
<form>
<input type=button onclick="number.splice(0)" value="Reset" />
</form>
</body>
</html>

Yes. Call it from a function.
EDIT: splice has problems with IE. Use array.length = 0 instead
<body>
<script type="text/javascript">
var number = [];
function myFunction() {
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
function myReset() {
//number.splice(0);
number.length = 0;
var x = document.getElementById("box");
x.innerHTML = "";
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add to list"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:scroll">
</div>
<form>
<input type=button onclick="myReset()" value="Reset" />
</form>
</body>

Despite being ugly, onclick="number.splice(0)" works: http://jsfiddle.net/39KZ9/20/

Related

How can I copy text from input

I write with translate.
I want the input text to appear in the paragraph, then click the button .
html code:
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
JS code:
var txt = JSON.parse(demo);
function myFunction() {
var txt = JSON.parse(demo);
function myFunction() {
document.getElementById("test").innerHTML = txt;
}
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>

You need to get the value of the input in the function. There's no need to use JSON.parse.
function myFunction() {
document.getElementById("test").innerHTML = document.getElementById("demo").value;
}
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>

function copyToParagraph() {
var inputValue = document.getElementById('txtInput').value;
var paragraphEle = document.getElementById('par');
paragraphEle.innerHTML = inputValue;
console.log(inputValue);
console.log(paragraphEle);
}
<input type="text" id="txtInput" />
<br/>
<button onclick="copyToParagraph()">Click Me to Copy</button>
<br/><br/><br/>
<p id="par"></p>

You need to make a var input = document.getElementById('input').value; So that you have the value. Then do this:
function myFunction() {
var input = document.getElementById('input').value;
document.getElementById('demo').innerHTML = input;
}

how can i get input text value and pass in button onclick method in javascript function pass by values

function addData (n1, n2) {
alert(fn+ln);
}
<body>
<input Type="text" name="n1">
<input Type="text" name="n2">
<button onClick="addData(n1.value,n2.value)">click</button>
</body>
its give me the following error:
ReferenceError: n1 is not defined.

You cannot get the value of the input by using n1.value You need to obtain the DOM element using document.getElementById and use its value to obtain the string value and parse it as Integer before you add them.
See this:
function addData (n1, n2) {
n1Val = parseInt(n1.value);
n2Val = parseInt(n2.value);
alert(n1Val+n2Val);
}
<body>
<input Type="text" id="n1">
<input Type="text" id="n2">
<button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>
</body>
If you want to merely concatenate the data and not add it, just remove the parseInt call and add the strings like in the following example:
function addData (n1, n2) {
n1Val = n1.value;
n2Val = n2.value;
alert(n1Val+n2Val);
}
<body>
<input Type="text" id="n1">
<input Type="text" id="n2">
<button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>
</body>
Hope it helps!!

Do like this way:
function addData (e) {
var rec = 0;
var t = document.getElementsByTagName('input');
for(var i=0;i<t.length;i++){
rec=rec+parseInt(t[i].value);
}
console.log(rec);
}
<script>
</script>
<body>
<input Type="text" name="n1">
<input Type="text" name="n2">
<button onClick="addData(this)">click</button>
</body>

<html>
<head>
<title>Input tutorial</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var ansD = document.getElementById("answer");
var final = val1 + val2;
alert(final);
}
</script>
</head>
<body>
value1 = <input type="text" id="value1" name="value1" value="1" /> value2 = <input type="text" id="value2" name="value2" value="2" />
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()" />
</body>
</html>

Input text needs a case change when button is clicked. Having trouble creating JS for this

I need to create two input text boxes that when the UpperCase button is clicked the input text is returned all in caps and when the LowerCase button is clicked the input text is returned in lower case. So for example:
Text: SuNsHiNe ToDaY
(upper case button)= SUNSHINE TODAY
(lower case button)= sunshine today
I have pasted the html code below and need help creating the JS code:
<!doctype html>
<html>
<head>
<script src='../p3-case.js'></script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="upperCase"/>
<input type="button" id="btn2" value="lowerCase"/>
</form>
</body>
</html>

I think you not need to use any external js just using Jquery
You need to use toLowerCase() and toUpperCase()
$("#btn1").click(function(){
var input = $("#input1");
input.val(input.val().toUpperCase());
});
$("#btn2").click(function(){
var input = $("#input1");
input.val(input.val().toLowerCase());
});
Here is sample of jsbin JSBIN

Here you go:
<!doctype html>
<html>
<head>
<script>
function upper()
{
var uc = document.getElementById('input1').value;
document.getElementById('input1').value = uc.toUpperCase();
}
function lower()
{
var lc = document.getElementById('input1').value;
document.getElementById('input1').value = lc.toLowerCase();
}
</script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="upperCase" onclick="upper();">
<input type="button" id="btn2" value="lowerCase" onclick="lower();">
</form>
</body>
</html>

writing from my tablet but i try my best! :)
Pure JavaScript:
Add onclick event to the button:
<input type="button" onclick="toupp()" id="btn1" value="upperCase";">
Then the functions
<script>
var toupp = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.value.toUpperCase();
}
and the other function:
var tolow = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.toLowerCase();
}
</script>

This code works perfectly for me
<!doctype html>
<html>
<head>
<script >
function toUpper(){
var obj = document.getElementById("input1");
var str = obj.value;
var res = str.toUpperCase();
obj.value = res;
}
function toLower(){
var obj = document.getElementById("input1");
var str = obj.value;
var res = str.toLowerCase();
obj.value = res;
}
</script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" onClick='toUpper()' value="upperCase";">
<input type="button" id="btn2" onClick='toLower()' value="lowerCase">
</form>
</body>
</html>

how to make a button appear only when another button is clicked through basic JS

im new at this.So, what I want is to hide the RESET button when the clock is working and it should appear when the clock is stoped.same with STOP button that it must only appear when the clock is working.This all must be done with simple and basic Java Script.I dont know about Jquery.
<script language="javascript">
var t1;
var t2;
var t3;
function fn_sample() {
document.frm.txtS.value = parseInt(document.frm.txtS.value) + 1;
t1 = document.frm.txtS.value;
if(t1>60){
document.frm.txtS.value = 0;
fn_incMin();
}
window.setTimeout("fn_sample()", 1000);
}
function fn_incMin() {
document.frm.txtM.value = parseInt(document.frm.txtM.value) + 1;
t2 = document.frm.txtM.value;
if(t2>60){
document.frm.txtM.value = 0;
fn_incHrs();
}
window.setTimeout("fn_incMin()", 60000);
}
function fn_incHrs() {
document.frm.txtH.value = parseInt(document.frm.txtH.value) + 1;
t3 = document.frm.txtH.value;
window.setTimeout("fn_incHrs()", 3600000);
}
function fn_stop() {
window.clearTimeout(t1);
window.clearTimeout(t2);
window.clearTimeout(t3);
}
function fn_reset() {
document.frm.txtS.value = 0;
document.frm.txtM.value = 0;
document.frm.txtH.value = 0;
}
</script>
</head>
<body>
<form name="frm">
<input type="text" name="txtH" value="0" size="2"/>
<input type="text" name="txtM" value="0" size="2"/>
<input type="text" name="txtS" value="0" size="2"/>
<br /><br />
<input type="button" value="Start" onclick="fn_sample();" />
<input type="button" value="Stop" onclick="fn_stop();" />
<input type="button" value="Reset" onclick="fn_reset();" />
</form>
</body>

You could do like this
<input type="button" value="Start" onclick="fn_sample();this.form.reset.style.display='none'" />
<input type="button" value="Stop" onclick="fn_stop();this.form.reset.style.display='inline'" />
<input type="button" value="Reset" name='reset' onclick="fn_reset();" />
or you coud also use the disable property
<input type="button" value="Start" onclick="fn_sample();this.form.reset.disabled=true" />
<input type="button" value="Stop" onclick="fn_stop();this.form.reset.disabled=false" />
<input type="button" value="Reset" name='reset' onclick="fn_reset();" />

Basically, you'd want to have a onclick property on the buttons like this:
var stopClicked = function(){
document.getElementById("stop").style.display = "none";
document.getElementById("reset").style.display = "";
}
var resetClicked = function(){
document.getElementById("stop").style.display = "";
document.getElementById("reset").style.display = "none";
}
<button onclick='stopClicked()' id='stop'>Stop</button>
<button onclick='resetClicked()' id='reset'>Reset</button>

It's not pretty, but help you undestand whats happends
<script language="javascript">
var t1;
var t2;
var t3;
var st1, st2, st3;
function fn_sample() {
document.getElementById('reset').style.display = 'none';
document.getElementById('start').style.display = 'none';
document.getElementById('stop').style.display = 'inline-block';
running = true;
document.frm.txtS.value = parseInt(document.frm.txtS.value) + 1;
t1 = document.frm.txtS.value;
if(t1>60){
document.frm.txtS.value = 0;
fn_incMin();
}
st1 = window.setTimeout("fn_sample()", 1000);
}
function fn_incMin() {
document.frm.txtM.value = parseInt(document.frm.txtM.value) + 1;
t2 = document.frm.txtM.value;
if(t2>60){
document.frm.txtM.value = 0;
fn_incHrs();
}
st2 = window.setTimeout("fn_incMin()", 60000);
}
function fn_incHrs() {
document.frm.txtH.value = parseInt(document.frm.txtH.value) + 1;
t3 = document.frm.txtH.value;
st3 = window.setTimeout("fn_incHrs()", 3600000);
}
function fn_stop() {
document.getElementById('reset').style.display = 'inline-block';
document.getElementById('start').style.display = 'inline-block';
document.getElementById('stop').style.display = 'none';
window.clearTimeout(st1);
window.clearTimeout(st2);
window.clearTimeout(st3);
}
function fn_reset() {
document.frm.txtS.value = 0;
document.frm.txtM.value = 0;
document.frm.txtH.value = 0;
}
</script>
</head>
<body>
<form name="frm">
<input type="text" name="txtH" value="0" size="2"/>
<input type="text" name="txtM" value="0" size="2"/>
<input type="text" name="txtS" value="0" size="2"/>
<br /><br />
<input id="start" type="button" value="Start" onclick="fn_sample();"style="display:inline-block" />
<input id="stop" type="button" value="Stop" onclick="fn_stop();" style="display:none" />
<input id="reset" type="button" value="Reset" onclick="fn_reset();" style="display:inline-block" />
</form>
</body>
What is inside:
variables st1, st2, st3 are handlers to setTimeout (in your code STOP button doesn't work)
window.setTimeout returns handler to use with clearTimeout
all fields have style proporty which shows or hide buttons on start
document.getElementById('stop') gets element and style.display = 'inline-block'; sets visible on element or hide to hide element
on Start show some buttons and hide unnecessary, on Stop show others and hide unnecessary.
And thats all. In pure JS. this is fiddle to test it: https://jsfiddle.net/6qz30eae/

HTML calculator

So I am doing a really basic thing. I wrote up this code. I was not able to get the result out of it. I am not sure what I am doing wrong. Because I am learning.
<head>
<script language="javascript" type="text/javascript">
function add(){
var input1=a;
var input2=b;
var result = a+b;
input1 = parseInt(document.getElementById("t1").value);
input2 = parseInt(document.getElementById("t2").value);
document.write("result");
}
</script>
<title>java</title>
</head>
<body>
<form name="f1">
<input type="text" id="t1" name="t1">
<input type="text" id="t2" name="t2">
<p>
<input type="button" id="add" value="add" onClick="function add();">
<input type="button" id="divide" value="divide" onClick="javascript:function divide();">
<input type="button" id="subtract" value="subtract" onClick="javascript:function subtract();">
<input type="button" id="multiply" value="multiply" onClick="javascript:function multiply();">
</p>
</form>
</body>
</html>
But it doesn't generate the the result.

The result wasn't actually being written, you were writing the string "result".
var input1=parseInt(document.getElementById("t1").value);
var input2=parseInt(document.getElementById("t2").value);
var result = input1+input2;
document.write(result);

Modify your function as:
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1+input2;
document.write(result);
}
Hope This helps

Try this:
<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);
}
</script>
<title>java</title>
</head>
<body>
<input type="text" id="t1" name="t1">
<input type="text" id="t2" name="t2">
<p>
<input type="button" id="add" value="add" onClick="add();">
<input type="button" id="divide" value="divide" onClick="divide();">
<input type="button" id="subtract" value="subtract" onClick="subtract();">
<input type="button" id="multiply" value="multiply" onClick="multiply();">
</p>
</body>
</html>
you can check this on http://htmledit.squarefree.com/

<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);
}
</script>

Develop Reference

JavaScript is the programming language of the Web.

Empty or reset entire array with button - javascript

Despite being ugly, onclick="number.splice(0)" works: http://jsfiddle.net/39KZ9/20/

Related

How can I copy text from input

how can i get input text value and pass in button onclick method in javascript function pass by values

Input text needs a case change when button is clicked. Having trouble creating JS for this

how to make a button appear only when another button is clicked through basic JS

HTML calculator

Categories

Resources