I have something like this in an HTML file:
<html>
<body>
<script type = text/javascript">
var value = 0;
add(x){
x++;
document.write(x);
}
</script>
<form>
<input type = "button" value = "Add one" onClick = "add(value)" >
</form>
<body>
</html>
When I run this and click the button, the page will just update and display only the new value. How can I change this so that it's just a real time update, and the "Add one" button remains on the screen?
I think I need to have something like a "field" to display the value, and just get that field id, but I'm not sure if that's the right way of thinking.
Just use a span:
<form>
<input type="button" value="Add one" onclick="add();"/>
</form>
<span id="field">0</span>
Then, use document.getElementById() and innerHTML to update it:
var value = 0;
function add() {
value++;
document.getElementById("field").innerHTML = value;
}
var value = 0;
function add() {
value++;
document.getElementById("field").innerHTML = value;
}
<form>
<input type="button" value="Add one" onclick="add();"/>
</form>
<span id="field">0</span>
In your html add an id in a div for example addOne
<html>
<body>
<script type = text/javascript">
var x = 0;
function increment(value){
document.getElementById('addOne').innerHTML = ++x;
}
</script>
<form>
<input type = "button" onClick = "increment(value)" >
</form>
<div id ="addOne"></div>
<body>
</html>
Related
I'm trying to simply get the value of an input and put it into a p tag.but it looks like that I'm not getting anything from the input tag
<body>
<input type="text" id="text">
<button class="button" onclick="sum();">click</button>
<p id="lblResult">Result</p>
</body>
<script>
const text = document.getElementById('text').value;
function sum()
{
document.getElementById('lblREsult').innerHTML = text;
}
</script>
You get value from input on page load when it's empty, move document.getElementById('text').value into sum function.
And you have an typo, lblREsult !== lblResult
function sum() {
const text = document.getElementById('text').value;
document.getElementById('lblResult').innerHTML = text;
}
<input type="text" id="text">
<button class="button" onclick="sum();">click</button>
<p id="lblResult">Result</p>
I'm trying to pass a number to a text field on button click. User hits "add to cart" and the 2499 is added to the total already in the text field.
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
<button id="scart" value="Add to Cart" onclick="addCart()" +='2499'"/>
<script type="text/javascript">
var total=""
function addCart(){
document.getElementById('scart').value;
total+= document.getElementById('display').value;
console.log(total);
}
</script>
When learning, I feel that I understand the logic, but don't know the syntax.
I think this is what you want. I made a codepen for you: https://codepen.io/NeilGBK/pen/boGadz?editors=1111
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
</form>
<button id="scart" onclick="addCart(2499)">Add To Cart</button>
<script>
function addCart(v){
document.getElementById('display').value = v
console.log(v);
return false;
}
</script>
I'm passing the number to the function and simply using that to change the value of the input. I'm also logging it to the console
You have some errors, your quotes are not matching and you don't have closing button tag. Also, why don't you add 2499 in the code?
How about this:
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
<button id="scart" value="Add to Cart" onclick="addCart()" >
</button>
<script type="text/javascript">
var total=""
function addCart(){
document.getElementById('scart').value;
total+= document.getElementById('display').value + 2499;
console.log(total);
}
</script>
</form>
It's not clear what you are trying to do so I made the beginning of a "cart" button where the input is the quantity you want to add to cart.
I then print out the number typed in and the total if you pressed the button more than once.
<input id="display" type="text" name="output" size="6" placeholder="0000" />
<button id="scart" type="button">Add to cart</button>
<script type="text/javascript">
var total = 0;
var display = document.querySelector('#display');
var scart = document.querySelector('#scart');
scart.addEventListener('click', function() {
var str = display.value;
var num = parseInt(str, 10);
console.log('You entered the number: ', num);
if (!isNaN(num)) {
total += num;
}
console.log('The total is now: ', total);
});
</script>
There are many things that is wrong here:
First, replace + with a good indicator data-value or whatever
<button id="scart" value="Add to Cart" onclick="addCart()" data-value="2499"/>
Second, In your script you should make var total a number not string.
var total = 0;
Finally, your addCart() function.
function addCart() {
// I see you are trying to get the value of the clicked button so you need to store it as this does not do anything
// document.getElementById('scart').value;
var value = document.getElementById('scart').value;
// Add it to total var;, you need to parseInt it as .value returns string
total += parseInt(value);
// put it on display
document.getElementById('display').value = total;
}
Hope that helps.
<body>
<header>
</header>
<nav>
<div class="table" id="div1" >
</div>
<br>
<br>
<br>
<div class="boxes" id="boxes">
<input type="text" maxlength="2" name="value" id='value' />
<input type="text" maxlength="2" name="value2" id='value2' />
<input type="button" value="submit" onclick="size()" />
</div>
</nav>
</body>
So basically when i write this window.onload = function() {beggining1(10,10);};
everything works ok, when page loads 10 rows and 10 columns of buttons are made.
But now i want instead on pageload ,I want to make the buttons from a button which recieves columns and rows properties from 2 text boxes.<input type="button" value="submit" onclick="size()" />
<script type="text/javascript">
var rows = getElementById('value');
var columns = getElementById('value2');
window.onload = function() {beggining1(10,10);};
function size(){
beggining1(rows,columns);
}
function beggining1(k,l){
for (i=1;i<k;i++){
for (j=1;j<l;j++){
var btn = document.createElement("BUTTON");
btn.className = "button1";
btn.style.cssText = 'background:green;height:50px;width:50px;margin:5px;';
var t = document.createTextNode(i+"_"+j);
btn.appendChild(t);
document.getElementById("div1").appendChild(btn);
document.getElementById('div1').addEventListener('click' , reserve);
}
document.getElementById('div1').appendChild(document.createElement("br"));
}
}
</script>
I dont know whats wrong in my code and im trying to understand but i can't i guess its something stupid i miss.
Replace size function with the updated one mentioned below and remove window.load handler as now you want to generate when user click on button,
I return false from the size() function because if the button is in form tag it would submit the form and postback the page.
<script type="text/javascript">
function size(){
var rows = document.getElementById("value").value;
var columns = document.getElementById("value2").value;
beggining1(rows,columns);
return false;
}
function beggining1(k,l){
for (i=1;i<k;i++){
for (j=1;j<l;j++){
var btn = document.createElement("BUTTON");
btn.className = "button1";
btn.style.cssText = 'background:green;height:50px;width:50px;margin:5px;';
var t = document.createTextNode(i+"_"+j);
btn.appendChild(t);
document.getElementById("div1").appendChild(btn);
document.getElementById('div1').addEventListener('click' , reserve);
}
document.getElementById('div1').appendChild(document.createElement("br"));
}
}
</script>
I have 2 textBox and 1 button!
I want to insert text to one of these textboxs. When I click to textbox_1 and click button, mytext will appear at textbox_1. When I click to textbox_2 and click button, mytext will appear at textbox_2.
How can I do this by using JavaScript?
Please help me! I'm new on JavaScript!
put id's of the two textboxes as textbox_1 and textbox_2 and put onclick='onCLickButton();' on the <button> tag
and write the following code in the script
var text_to_be_inserted = "sample";
function onCLickButton(){
document.getElementById("textbox_1").value='';
document.getElementById("textbox_2").value='';
if(document.getElementById("textbox_1").focused){
document.getElementById("textbox_1").value=text_to_be_inserted;
}
else if(document.getElementById("textbox_2").focused){
document.getElementById("textbox_2").value=text_to_be_inserted;
}
else{
// do nothing
}
}
Edited
Please accept my apologies actually I am used to use these functions as I have my own js file having these functions.
please add onfocus='onFocusInput(this);' in the <input> tags and add the following code in the script
function onFocusInput(object){
document.getElementById("textbox_1").focused=false;
document.getElementById("textbox_2").focused=false;
object.focused = true;
}
<html>
<head>
<script type="text/javascript">
var index = false;
var text = "This text shifts to text box when clicked the button";
function DisplayText(){
if(!index){
document.getElementById("txt1").value = text;
document.getElementById("txt2").value = "";
}
else{
document.getElementById("txt2").value = text;
document.getElementById("txt1").value = "";
}
index = index ? false : true;
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="Change Text" onclick="DisplayText()"/>
</body>
</html>
Take a look at the onFocus() attribute for the INPUT tag - and think about keeping track of what was last given the focus. I'm being a little vague as this sounds a lot like homework.
It isn't the prettiest / most delicate solution, but it works and you can build off it to fulfill your needs.
<script>
var field = 0;
function addText(txt){
if(field === 0) return false;
field.value = txt;
}
</script>
For a form such as
<form>
<input type="text" name="box1" id="box1" onfocus="field=this;" />
<input type="text" name="box2" id="box2" onfocus="field=this;" />
<input type="button" onclick="addText('Hello Thar!');" />
</form>
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('');