I want to write my first code. I made this, but it still needs a change.
There is shown a value and this value can be changed with 2 buttons. When the buttons Increment is pushed, the value has to go with one higher. If the button Double is pressed, then the value has to be double (e.g. going from 3 to 6). Now it is coded like a decrement, but this needs to be changed.
var x = 0
var element = document.getElementById("value");
element.innerHTML = x;
function button1() {
element.innerHTML = ++x;
}
function button2() {
element.innerHTML = --x;
}
<html>
<body>
<title> First code </title>
<body>
<div id="value"></div>
<input type=button value="Increment" onclick="button1()" />
<input type=button value="Double" onclick="button2()" />
</body>
</html>
You need to multiply by 2 rather than subtract 1.
There's no need for the x variable, you can operate directly on the innerHTML. JavaScript's type juggling will automatically convert it to a number when you use these arithmetic operators on it.
var element = document.getElementById("value");
element.innerHTML = '0';
function button1() {
element.innerHTML++;
}
function button2() {
element.innerHTML *= 2;
}
<html>
<body>
<title> First code </title>
<body>
<div id="value"></div>
<input type=button value="Increment" onclick="button1()" />
<input type=button value="Double" onclick="button2()" />
</body>
</html>
Related
it does not returns prpoer answer it returnes NAN in Answer
<html>
<head>
<script type="text/javascript">
function pro(n,p)
{
var number=parseInt(n);
var powe=parseInt(p);
for(var i=1;i<powe;i++)
{
number*=number;
}
document.getElementById("answer").value=number;
}
</script>
</head>
<body>
<form name="F" >
Enter Number <input type="text" name="num" id="num"/>
Enter Power <select name="powe" id="powe">
<option value="2" >square</option>
<option value="3" >cube</option>
</select>
Answer<input type="text" name="Answer" id="answer" />
<input type="button" onClick="pro(num,powe)" value="Calculate" />
</form>
</body>
</html>
The issue is this: onClick="pro(num,powe)". Instead of the values for num and powe being gotten from the input elements and passed into the pro function, the actual element references (which are not numbers) are being passed.
To solve this problem, you'll need to get the values of the elements. But, before you just make a quick edit to your code, don't use inline HTML event attributes (onclick) in the first place. Instead, separate your JavaScript from your HTML and set up event handlers using modern standards with .addEventListener() as shown below.
Also (FYI):
Since you aren't actually submitting form data anywhere, you don't
need a <form> element.
It's not necessary to use parseInt with p.value because that
value is coming from your select and you've already set those at
whole numbers.
Don't bother with self-terminating tags (<input />) as you
gain nothing from using them.
If you are expecting only numeric input, it's better to use input
type=number which restricts the user input to numbers. Making this change also saves you from worrying about parseInt on the input number being misinterpreted as other bases than 10.
Since you don't want the user to be able to change the result of the
operation, it's better to display it in a non-editable element, like
a span.
It's a good idea to move your <script> element to just before the
closing body tag because, by the time the parser reaches that
point, all your HTML elements will have been parsed into memory.
<html>
<head>
</head>
<body>
<div>
Enter Number <input type="number" name="num" id="num">
</div>
<div>
Enter Power
<select name="powe" id="powe">
<option value="2">square</option>
<option value="3">cube</option>
</select>
</div>
<div>
Answer <span id="answer"></span>
</div>
<div>
<input type="button" value="Calculate">
</div>
<script>
// Get references to the inputs, the answer container and the button
let inputNum = document.getElementById("num");
let power = document.getElementById("powe");
let answer = document.getElementById("answer");
let btn = document.querySelector("input[type='button']");
// Set up the click event handler for the button
btn.addEventListener("click", function(){
// Now you need to get the input values and pass them
// to the function that will act with them
pro(inputNum.value, power.value);
});
function pro(n,p) {
var number = parseInt(n);
for(var i = 1; i < p; i++) {
number *= number;
}
answer.textContent = number;
}
</script>
</body>
</html>
Try
document.getElementById("answer").innerHTML = number
I'm total beginner with programming and javascript, i have coded small thing where is two inputs, user writes number on each and program plus it and gives total numbers below it
function printTotal(a,b){
// this function should take values as a parameter
}
function calculateTotal(a,b){
var c=a+b;
// this function should calculate and return
}
document.getElementById("results").innerHTML = "Total= " +printTotal(a,b) ;
<div class="keski">
<form id="f">
<input type=text id="n1"><br>
<input type=text id="n2"><br>
</form>
<button class="g" type="button" onclick="printTotal(f.n1.value, f.n2.value)">Count</button>
<div id="results"></div>
</div>
i have two functions which should help each other in order to make this possible( i have commented the code) , i know how to make this with one function, but dont know how to make it with two functions, do i need to put functions inside each other(nested)? sory english is not my mother language.
In calculateTotal function you need return value. In printTotal you can get value in 2 input and call calculateTotal for calculate total and print it.
Try this code:
function printTotal(a, b){
// this function should take values as a parameter
// print total
document.getElementById("results").innerHTML = "Total= " + calculateTotal(a, b)
}
function calculateTotal(a,b){
// need return total
return Number(a) + Number(b);
// this function should calculate and return
}
<div class="keski">
<form id="f">
<input type=text id="n1"><br>
<input type=text id="n2"><br>
</form>
<button class="g" type="button" onclick="printTotal(f.n1.value, f.n2.value)">Count</button>
<div id="results"></div>
</div>
function printTotal(a,b) {
return calculateTotal(a,b);
}
function calculateTotal(a,b) {
return a+b;
}
Is this what you mean?
You can try with this changes. Basically I moved the code that assigns value to results div, and changed a method call there.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
</style>
</head>
<body>
<div class="keski">
<form id="f">
<input type=text id="n1"><br>
<input type=text id="n2"><br>
</form>
<button class="g" type="button" onclick="printTotal(f.n1.value, f.n2.value)">Count</button>
<div id="results"></div>
</div>
<script>
function printTotal(a,b){
document.getElementById("results").innerHTML = "Total= " +calculateTotal(a,b) ;
}
function calculateTotal(a,b){
var c = Number(a) + Number(b); //I use the 'Number' method here in order to avoid a and b being concatenated (treated like strings)
return c; //This return was missing so we can return value to calling method.
}
</script>
</body>
</html>
I want to store the value given in the text box in a variable. I am beginner to javascript. Please help me out. Here s my code.
<!DOCTYPE html>
<html>
<body>
Days of Journey: <input type="text" id="doj" name="daysofjourney">
<input type="button" value="submit" onclick="dayscounter()">
<script language="javascript" type="text/javascript">
var travel = document.getElementById("doj").value;
function dayscounter() {
var days;
for(days = 1; days <= travel; days++) {
document.write(days);
}
}
</script>
</body>
</html>
You nearly had it already...
function dayscounter() {
var travel = document.getElementById("doj").value;
var days;
for(days=1;days<=travel;days++)
{
document.write(days);
}
}
The problem was, that your first assignment of the variable travel is made as soon as the HTML code is loaded. The user can't have made an input yet at that time, thus the variable stays empty. If you include document.getElementById("doj").value inside the function, you will get the value at that specific time you launch the function.
Just parse value to int
var travel = +(document.getElementById("doj").value;);
You can use 'value' attribute of an text input to set it's value like:
<input type="text" id="textid" value="value content" />
and you can do your function like this:
<script language="javascript" type="text/javascript">
function dayscounter()
{
var travel = document.getElementById("doj").value;
var days;
var result = "";
for (days = 1; days <= parseInt(travel); ++days)
{
document.getElementById("result").value += " " + days;
}
}
</script>
Days of Journey:
<input type="text" id="doj" name="daysofjourney" />
<input type="button" value="submit" onclick="dayscounter()" />
<p>
<input type="text" id="result" />
</p>
Okay, I'm ashamed to be asking, but it just isn't clicking. My brother-in-law has an assignment to have a text box and then a command button. When the button is pressed, it will loop 10 times printing whatever was in the text box. Should be simple - I know!
I know the error is on this line:
<input type="button" value="Press Here" onClick="sayit(document.getElementById('myTextField').value) ">
Here's what we have:
<html>
<head>
<title> Homework #11 part 2 </title>
<script type="text/javascript">
function sayIt(var message){
count = 1;
num = 10;
while (count <= num) {
document.write(message);
document.write("<br/>");
count = count + 1;
}
}
</script>
</head>
<body>
<p>
Type in a phrase.
<input type='text' id='myText' />
<br />
<input type="button" value="Press Here" onClick="sayit(document.getElementById('myTextField').value) ">
</p>
</body>
The code has three thins wrong.
1) function sayIt(var message) should be function sayIt(message)
2)onClick="sayit(....)" should be onClick="sayIt(....)"
sayIt is function name
3)document.getElementById('myTextField').value should be document.getElementById('myText')
myText is input element's id attribute
You've got three things wrong.
http://jsfiddle.net/userdude/jcfD8/
Hints - you don't need var in your function declaration, your id is not right, and you "misspelled" sayIt
( ^ If you care to see the answers, they are above ^ )
Invest in Firebug. It gave me all the answers I needed. ;)
I'm having a problem with this form I'm working on. Whenever I add, or refresh the page, the values are still there. I believe this is because the clone method copies the value attribute from the textBox. Is there any way I can get rid of them when I add another textBox?
<html>
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function removeTextBox()
{
var childCount = $('p').size() //keep track of paragraph childnodes
//this is because there should always be 2 p be tags the user shouldn't remove the first one
if(childCount != 2)
{
var $textBox = $('#textBox')
$textBox.detach()
}
}
function addTextBox()
{
var $textBox = $('#textBox')
var $clonedTextBox = $textBox.clone()
//document.getElementById('textBox').setAttribute('value', "")
$textBox.after($clonedTextBox)
}
</script>
</head>
<body>
<form id =
method="POST"
action="http://cs.harding.edu/gfoust/cgi-bin/show">
<p id= "textBox">
Email:
<input type = "text" name="email" />
<input type ="button" value ="X" onclick = "removeTextBox()"/>
</p>
<p>
Add another email
</p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The Following addition should work:
var $clonedTextBox = $textBox.clone();
$($clonedTextBox).val('');