My output shows "[object HTMLInputElement]" rather than the sum of my inputs

My output shows "[object HTMLInputElement]" rather than the sum of my inputs - javascript

I am trying to make a simple HTML page with four text boxes. In my output, I am only getting object HTMLInputElement.
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function nhap_number(){
var a = document.nhap.number_a;
var b = document.nhap.number_b;
}
function random_c(){
var c = Math.round(Math.random()*100)%100;
document.getElementById("number_c").value=c;
}
function random_d(){
var d = Math.round(Math.random()*100)%100;
document.getElementById("number_d").value=d;
}
function sum(number_a,number_b,number_c,number_d){
return(number_a+number_b+number_c+number_d);
alert("ddddddd");
}
function show(){
myDiv = document.getElementById("show");
myDiv.innerHTML = "sum: "+sum(number_a+number_b+number_c+number_d);
}
</script>
<body>
<div>
<form name = "nhap">
<p> input a: <input id = "number_a" type="text" placeholder="please input number a "/></p>
<p> input b: <input id = "number_b" type="text" placeholder="please input number b "/></p>
<p> input c: <input id = "number_c" placeholder="random number c "/><input type="button" value="value_c" onClick="random_c();"/></p>
<p> input d: <input id = "number_d" placeholder="random number d "/><input type="button" value="value_d" onClick="random_d();"/></p>
<input type="button" value="Valid Form" onClick="show();">
</form>
</div>
<div id="show">
</div>
</body>
</html>

You never defined number_a, number_b, ... and so on. Some browsers will define them as a HTML element being based on the id. So the value number_a will be referencing the HTML element with the id number_a in this case. Trying to print them will show the value [object HTMLInputElement], you will want to get the .value property of them, then convert them to a number:
+number_a.value // note the "+" converts the string to a number
// or
+document.getElementById("number_a").value // recommenced

Change in show() function
myDiv.innerHTML = "sum:"+sum(parseInt(document.getElementById('number_a').value)+parseInt(document.getElementById('number_b').value)+parseInt(document.getElementById('number_c').value)+parseInt(document.getElementById('number_d').value));
You were trying to add HTML elements together. Also do a parseInt of their values.

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function nhap_number(){
var a = document.nhap.number_a;
var b = document.nhap.number_b;
}
function random_c(){
var c = Math.round(Math.random()*100)%100;
document.getElementById("number_c").value=c;
}
function random_d(){
var d = Math.round(Math.random()*100)%100;
document.getElementById("number_d").value=d;
}
function sum(number_a,number_b,number_c,number_d){
return(Number(number_a.value)+Number(number_b.value)+Number(number_c.value)+Number(number_d.value));
}
function show(){
myDiv = document.getElementById("show");
debugger;
myDiv.innerHTML = "sum: "+sum(number_a,number_b,number_c,number_d);
}
</script>
<body>
<div>
<form name = "nhap">
<p> nhap a: <input id = "number_a" type="text" placeholder="please input number a "/></p>
<p> nhap b: <input id = "number_b" type="text" placeholder="please input number b "/></p>
<p> nhap c: <input id = "number_c" placeholder="random number c "/><input type="button" value="value_c" onClick="random_c();"/></p>
<p> nhap d: <input id = "number_d" placeholder="random number d "/><input type="button" value="value_d" onClick="random_d();"/></p>
<input type="button" value="Valid Form" onClick="show();">
</form>
</div>
<div id="show">
</div>
</body>
</html>

Related

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>

HTML onsubmit event is not calling the JavaScript function

I have two buttons in my form for calling two JavaScript functions. The first button works good in its onclick event calling the payroll() function successfully but the second button is of type submit and it never calls the send() function on form submission. I don't know why this issue occurs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html >
<head>
<title>hr page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"
src="/static/js/sijax/sijax.js"></script>
<script type="text/javascript">
{{ g.sijax.get_js()|safe }}</script>
<link rel="stylesheet" href="{{url_for('static', filename='styles/signupcss.css')}}">
<script type="text/javascript" >
function payroll() {
var basic=document.forms["salary"]["bsalary"].value;
var empid=document.forms["salary"]["empid"].value;
var ta,hra,da,pf,netsalary,grosssalary;
if (empid == ""||basic == "") {
alert("Employee ID and Salary details must be filled out");
return false;
}
if(isNaN(basic))
{alert("Salary must be in Numbers");
return false;
}
hra=basic*40/100;
da=basic*15/100;
pf=basic*12/100;
basic=parseInt(basic);
hra=parseInt(hra);
da=parseInt(da);
grosssalary=basic + hra + da;
ta=basic*6.2/100;
netsalary=grosssalary-ta;
document.getElementById("hra").innerHTML=hra;
document.getElementById("ta").innerHTML=ta;
document.getElementById("da").innerHTML=da;
document.getElementById("netsalary").innerHTML=netsalary;
document.getElementById("pf").innerHTML=pf;
document.getElementById("grosssalary").innerHTML=grosssalary;
window.alert("HI"+grosssalary);
return true;
}
function send()
{
var id = document.forms['salary']['empid'].value;
var basic = document.forms['salary']['bsalary'].value;
var hra = document.forms['salary']['hra'].value;
var da = document.forms['salary']['da'].value;
var ta = document.forms['salary']['ta'].value;
var pf = document.forms['salary']['pf'].value;
var gross_sal = document.forms['salary']['grosssalary'].value;
window.alert("HI"+gross_sal);
var net_sal = document.forms['salary']['netsalary'].value;
Sijax.request('send',[id, basic, hra, ta, da, pf, gross_sal, net_sal]);
}
</script>
</head>
<body style="font-family:Lato">
<div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c">
<h2>Welcome to HR Department</h2><br>
</div>
<div style="margin-left:15%" >
<h2>Name</h2>
<form id="salary" name="salary" style="margin-top: 2%" method="post" onsubmit="return send()" >
<label id = "empid">Employee ID</label><br>
<input type = "text" name = "empid" placeholder = "Employee ID" /><br><br>
<label id = "bsalary">Basic Salary</label><br>
<input type = "text" name = "bsalary" placeholder = "Basic salary" /><br><br>
<input type="button" value="Calculate" onclick="return payroll()"><br><br>
<label for ="hra">House Rent Allowance(HRA)</label>
<p id="hra" name="hra"></p><br>
<label for ="ta">Travel Allowance(TA)</label>
<p id="ta" name="ta"></p><br>
<label for ="da"> Dearness Allowance(DA)</label>
<p id="da" name="da"></p><br>
<label for ="netsalary">Net Salary</label>
<p id="netsalary" name="netsalary"></p><br>
<label for ="pf">Provident Fund(PF)</label>
<p id="pf" name ="pf"></p><br>
<label for ="grosssalary">Gross Salary</label>
<p id="grosssalary" name="grosssalary"></p><br><br>
<input type="submit" value="Upload Salary">
</form>
</div>
</body>
</html>

You can't act with <p> elements like as a form-elements. You may create a respective <input type="hidden"> elements and fill them in payroll(), or get values by .innerHtml on paragraphs.
P.S. You have actually a TypeError exception, calling undeclared form elements like document.forms['salary']['grosssalary'] and so on.

okay, quick fix, since you are using python flask library Sijax for ajax and therefore jQuery, you can alter your javascript send function like this:
function send(e){
e.preventDefault(); //it is as good as returning
//false from the function in all cases
var id = document.forms['salary']['empid'].value;
...
}
and change your onsubmit handler declaration like this:
<form id="salary" name="salary" style="margin-top: 2%" method="post"
onsubmit="return send(event)" >
please note that when you stop the event chain propagation, you will have to do a manual submission of the form.
So, you can modify your send function to do .preventDefault based on your custom criterias, otherwise, let the form submit

Your code actually works, if you're running this code as a snippet here in stack overflow, Form submission is actually blocked by default. Try running your code in codepen. I tried it and it's actually working.
http://codepen.io/jhonix22/pen/VPZagb

Check this out. It is nowhere close to a perfect solution but I think it helps. You can not access the paragraphs as if you would the form input elements. Im not entirely sure what Sijax thing is. I believe it is just a normal AJAX HTTP thing with some sort of CSRF security filters.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>hr page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"
src="/static/js/sijax/sijax.js"></script>
<script type="text/javascript">
{
{
g.sijax.get_js() | safe
}
}</script>
<link rel="stylesheet" href="{{url_for('static', filename='styles/signupcss.css')}}">
<script type="text/javascript">
function payroll() {
var basic = document.forms["salary"]["bsalary"].value;
var empid = document.forms["salary"]["empid"].value;
var ta, hra, da, pf, netsalary, grosssalary;
if (empid == "" || basic == "") {
alert("Employee ID and Salary details must be filled out");
return false;
}
if (isNaN(basic)) {
alert("Salary must be in Numbers");
return false;
}
hra = basic * 40 / 100;
da = basic * 15 / 100;
pf = basic * 12 / 100;
basic = parseInt(basic);
hra = parseInt(hra);
da = parseInt(da);
grosssalary = basic + hra + da;
ta = basic * 6.2 / 100;
netsalary = grosssalary - ta;
document.getElementById("hra").innerHTML = hra;
document.getElementById("ta").innerHTML = ta;
document.getElementById("da").innerHTML = da;
document.getElementById("netsalary").innerHTML = netsalary;
document.getElementById("pf").innerHTML = pf;
document.getElementById("grosssalary").innerHTML = grosssalary;
window.alert("HI" + grosssalary);
return true;
}
function send() {
var id = document.forms['salary']['empid'].value;
var basic = document.forms['salary']['bsalary'].value;
var hra = document.getElementById('hra').innerHTML;
var da = document.getElementById('da').innerHTML;
var ta = document.getElementById('ta').innerHTML;
var pf = document.getElementById('pf').innerHTML;
var gross_sal = document.getElementById('grosssalary').innerHTML;
window.alert("HI" + gross_sal);
var net_sal = document.getElementById('netsalary').innerHTML;
// I think you are missing something here.
Sijax.request('send', [id, basic, hra, ta, da, pf, gross_sal, net_sal]);
}
</script>
</head>
<body style="font-family:Lato">
<div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c">
<h2>Welcome to HR Department</h2><br>
</div>
<div style="margin-left:15%">
<h2>Name</h2>
<form id="salary" name="salary" style="margin-top: 2%" method="post" onsubmit="return false">
<label id="empid">Employee ID</label><br>
<input type="text" name="empid" placeholder="Employee ID"/><br><br>
<label id="bsalary">Basic Salary</label><br>
<input type="text" name="bsalary" placeholder="Basic salary"/><br><br>
<input type="button" value="Calculate" onclick="return payroll()"><br><br>
<label for="hra">House Rent Allowance(HRA)</label><br>
<p id="hra" readonly name="hra"></p>
<label for="ta">Travel Allowance(TA)</label><br>
<p id="ta" readonly name="ta"></p>
<label for="da"> Dearness Allowance(DA)</label><br>
<p id="da" readonly name="da"></p>
<label for="netsalary">Net Salary</label><br>
<p id="netsalary" readonly name="netsalary"></p>
<label for="pf">Provident Fund(PF)</label><br>
<p id="pf" readonly name="pf"></p>
<label for="grosssalary">Gross Salary</label><br>
<p id="grosssalary" readonly name="grosssalary"></p><br>
<input type="button" onclick="send()" value="Upload Salary">
</form>
</div>
</body>
</html>

Calculate the difference between number from user input

This should be a no brainer but i have no experience in Javascript and i can't see why this should not work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
<p> STD: </p>
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
</head>
<body>
<script>
function useUndantag() {
var a = document.getElementsByName("STD");
var b = document.getElementsByName("ATD");
var c = document.getElementsByName("STA");
var d = document.getElementsByName("ATA");
if (a-b >1) {
alert("No undantag");
}
else if (d-c >2) {
alert ("No undantag");
else () {
alert ("NO EU FOR YOU!")
}
}
}
</script>
</body>
</html>
The problem is that i get no alert at all and i can't seem to figure out why. If anyone has any tips if would be very glad for any help i can get.

First of all, getElementsByName returns a collection of HTML elements. Use [0] to access the first element. Next, you must use parseFloat or parseInt to parse the inputs as integers/floats. Also, HTML code goes in the body tag unless you have scripts, links, meta, title, and other tags. Finally, you have an syntax error:
else () { }
Should not have parentheses. You're also missing a brace after the else if, remove a closing brace after the else. Here's a fixed snippet:
function useUndantag() {
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
if (parseInt(a) - parseInt(b) > 1) { //notice the use of parseInt, you can use parseFloat to deal with decimals
alert("No undantag");
} else if(parseInt(d) - parseInt(c) > 2) {
alert("No undantag");
} else { //Notice no parentheses and some more braces
alert("NO EU FOR YOU!")
}
}
<p> STD: </p> <!-- HTML is in body tag !-->
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
Also, make sure you use .value to get the value.

Your syntax is incorrect.
Also, if you are comparing the values of the inputs then you need to get the value attribute of the input.
Also, document.getElementsByName returns an array of elements so you need to select the first element.
Here is a working example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
</head>
<body>
<p> STD: </p>
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
<script>
function useUndantag() {
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
if (a - b > 1) {
alert("No undantag");
} else if (d - c > 2) {
alert("No undantag");
} else {
alert("NO EU FOR YOU!")
}
}
</script>
</body>
</html>

You have enough errors
the function
document.getElemenstByName
return an array!
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
and you have sentences misdeclared
here code:
https://jsfiddle.net/evpog628/1/

1) It's better to use getElementById(), it's faster and you select only one element ("id" must be unique in HTML document).
2) Be sure to use correct HTML structure
<!doctype html>
<html>
<head>
<meta>
<title></title>
</head>
<body>
<input>
<script>
</script>
</body>
</html>
3) You need to be sure you get integer or float values from HTML fields to make your code work correctly. parseInt() or pareseFloat().
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
</head>
<body>
<p> STD: </p><input type="number" id="STD">
<p> STA: </p><input type="number" id="STA">
<p> ATD: </p><input type="number" id="ATD">
<p> ATA: </p><input type="number" id="ATA">
<button onclick="useUndantag();">Click me</button>
<script>
function useUndantag() {
var a = document.getElementById("STD");
var b = document.getElementById("ATD");
var c = document.getElementById("STA");
var d = document.getElementById("ATA");
if (parseInt(a.value)-parseInt(b.value)>1) {
alert("No undantag");
}
else if (parseInt(d.value)-parseInt(c.value) >2)
{
alert ("No undantag");
}
else
{
alert ("NO EU FOR YOU!");
}
}
</script>
</body>
</html>

how to have a userinput be ".pushed" into an array

I would like the user to be able to add a url into the box submit it and then it will be in the array and be displayed in order. I would like this to be able to happen as many times as they click submit.
this is where I am but it searches my computer for the url rather than the web.
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<input type="text" id="user_input" />
<button onClick="add()">ADD</button>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
<script>
var x=1
var user = document.getElementById("user_input");
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
document.getElementById("light").src = colour[0];
function add(){
colour.push(user);
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
</script>
</body>
</html>

If you want this to be reset when user reloads the page, you don't need to use a form.
<input type="text" id="user_input" />
<button onClick=add()>ADD</button>
And your add function
function add(){
var newVal = document.getElementById('user_input').value;
fruits.push(newVal); //assuming your array is named fruits, I can't see in your code where you have defined it.
}

Replace your add function with
var imageInput = document.querySelector("input[name=url]");
function add(evnt){
evnt.preventDefault();
colour.push(imageInput.value);
return false;
}

First you need to declare the array before you try to push it.
var fruits = [];
and then in your add function, get the url element and push to the array you declared previously. It's convenient if you give the element an id.
function add() { fruits.push(document.getElementById('url').value); }
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<form id="user">
insert an image URL to add to cycle: <input type="text" id="url" name="url"><br>
<button onclick="add()">ADD</button>
</form>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
<script>
var x = 1;
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
var fruits = [];
document.getElementById("light").src = colour[0];
var url = document.getElementById('url');
function add(){
fruits.push(url.value);
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
</script>
</body>
</html>

Add into from tag onsubmit="return false" and see add() function which is mentioned in below line.
var x=1
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"];
document.getElementById("light").src = colour[0];
function add(){
var newVal = document.getElementById('url').value;
colour.push(newVal);
document.getElementById('url').value = '';;
}
function colourChange(){
document.getElementById("light").src = colour[x];
x += 1;
if (x == colour.length ) x = 0
}
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body>
<form id="user" onsubmit="return false">
insert an image URL to add to cycle: <input type="text" name="url" id="url"><br>
<input type="submit" value="Submit" onclick="add()">
</form>
<img id="light" width="10%">
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button>
</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>

Develop Reference

JavaScript is the programming language of the Web.

My output shows "[object HTMLInputElement]" rather than the sum of my inputs - javascript

Related

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

HTML onsubmit event is not calling the JavaScript function

Calculate the difference between number from user input

how to have a userinput be ".pushed" into an array

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

Categories

Resources