Wipe Last Input From Onclick Button

Wipe Last Input From Onclick Button - javascript

I've been trying to wipe last input added in textarea by ONCLICK BUTTONS but don't seem to wipe last input instead it wipes all of onclick inputs.
Note, the button should be onclick as it variable changes dynamically.
<html>
<textarea id="Content" name="Content"></textarea>
<button class="AddTo" value="a">a</button>
<button class="AddTo" value="b">b</button>
<button class="AddTo" value="c">c</button>
<button class="Backspace" value="">backspace</button>
<button type="button" onclick="myFunctionY1();" class="list1" style="width:80px; background-color:red;" id="Y1">Y1</button>
<button type="button" onclick="myFunctionY2();" class="list1" style="width:80px; background-color:red;" id="Y2">Y2</button>
<script>
function myFunctionY1() {
document.getElementsByName("Content")[0].value += "Hello!";
}
function myFunctionY2() {
document.getElementsByName("Content")[0].value += "Hi!";
}
</script>
</html>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"> </script>
<script>
var values = [];
$(function () {
$('.AddTo').on('click', function () {
values.push($(this).val());
$('#Content').val(values.join(" "));
});
$('.Backspace').on('click', function () {
values.pop();
$('#Content').val(values.join(" "));
});
});
</script>

do it:
<html>
<textarea id="Content" name="Content"></textarea>
<button class="AddTo" value="a">a</button>
<button class="AddTo" value="b">b</button>
<button class="AddTo" value="c">c</button>
<button class="Backspace" value="">backspace</button>
<button type="button" class="list1" value="Hello!" style="width:80px; background-color:red;" id="Y1">Y1</button>
<button type="button" class="list1" value="Hi!" style="width:80px; background-color:red;" id="Y2">Y2</button>
</html>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"> </script>
<script>
var values = [];
$(function () {
$('#Y1').attr("value", "foo");
$('#Y2').attr("value", "foo2");
$('.AddTo').on('click', function () {
values.push($(this).val());
$('#Content').val(values.join(" "));
});
$('.Backspace').on('click', function () {
values.pop();
$('#Content').val(values.join(" "));
});
$('.list1').on('click', function () {
values.push($(this).val());
$('#Content').val(values.join(" "));
});
});
</script>

Related

How do I disable multiple buttons when I click a button

<script type="text/javascript">
function button1() {
var elem = document.getElementById("button1");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
function button2() {
var elem = document.getElementById("button2");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
function button3() {
var elem = document.getElementById("button3");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
function button4() {
var elem = document.getElementById("button4");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
function button5() {
var elem = document.getElementById("button5");
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
</script>
How do disable all the buttons if I select one button. Do I have to disable all the buttons one by one or is there a way to do all the buttons.

Alright, with whatever you have given, maybe you're looking for something like a radio button. I am using Bootstrap and jQuery - it's much easier than vanilla JavaScript to achieve something that you're trying to do:
$(function () {
$(".btn").click(function () {
$(".btn").prop("disabled", true);
$(this).prop("disabled", false).addClass("active");
$("p").text("You have clicked on button #" + $(this).data("id") + ".");
$(this).text("Selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<div class="p-5">
<button class="btn btn-primary button-1" data-id="1">Choose 1</button>
<button class="btn btn-primary button-2" data-id="2">Choose 2</button>
<button class="btn btn-primary button-3" data-id="3">Choose 3</button>
<button class="btn btn-primary button-4" data-id="4">Choose 4</button>
<button class="btn btn-primary button-5" data-id="5">Choose 5</button>
<p id="status" class="py-3"></p>
</div>
On clicking of any button above, the respective button will be activated and the others will be disabled.
Resetting...
Option One: Using the same button!
$(function () {
$(".btn").click(function () {
if ($(this).hasClass("active")) {
$(".btn").prop("disabled", false);
$("p").text("");
$(this).text("Choose " + $(this).data("id"));
} else {
$(".btn").prop("disabled", true);
$(this).prop("disabled", false).addClass("active");
$("p").text("You have clicked on button #" + $(this).data("id") + ".");
$(this).text("Selected");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<div class="p-5">
<button class="btn btn-primary button-1" data-id="1">Choose 1</button>
<button class="btn btn-primary button-2" data-id="2">Choose 2</button>
<button class="btn btn-primary button-3" data-id="3">Choose 3</button>
<button class="btn btn-primary button-4" data-id="4">Choose 4</button>
<button class="btn btn-primary button-5" data-id="5">Choose 5</button>
<p id="status" class="py-3"></p>
</div>
Option Two: Using a Cancel Button
$(function () {
$(".btn-primary").click(function () {
$(".btn-primary").prop("disabled", true);
$(this).prop("disabled", false).addClass("active");
$(".btn-info").prop("disabled", false);
$("p").text("You have clicked on button #" + $(this).data("id") + ".");
$(this).text("Selected");
});
$(".btn-info").click(function () {
$(".btn").prop("disabled", false);
$("p").text("");
$(".btn-primary").text(function () {
return "Choose " + $(this).data("id");
});
$(this).prop("disabled", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<div class="p-5">
<button class="btn btn-primary button-1" data-id="1">Choose 1</button>
<button class="btn btn-primary button-2" data-id="2">Choose 2</button>
<button class="btn btn-primary button-3" data-id="3">Choose 3</button>
<button class="btn btn-primary button-4" data-id="4">Choose 4</button>
<button class="btn btn-primary button-5" data-id="5">Choose 5</button>
<p id="status" class="py-3"></p>
<button class="btn btn-info" disabled>Cancel</button>
</div>
I hope the above two solutions are something that you're looking for! 😁

Always avoid repetitive code.
By "disabling all buttons", I guess you mean set their value back to "Choose".
<script type="text/javascript">
function buttonBehavior(num) {
// reset all buttons
let i=1;
while(document.getElementById("button"+i)!==null) {
document.getElementById("button"+i).value = 'Choose';
i++;
}
// set selected button
var elem = document.getElementById("button"+num);
if (elem.value=="Choose") elem.value = "Selected";
else elem.value = "Choose";
}
</script>

Save values of multiple clicks and get all values inline

I have multiple buttons on my page. I want to get the values for those and displayed in one line. How do I do that.
I have 3 buttons, onclick they return these values:
Dark : returns 'scoop'
Danger : returns 'swoosh'
Warning : returns 'spoon'
I have one big button (info), on clicking that I want that to return: scoop&swoosh&spoon
How do I do that?
let val;
$('#one').on('click', function(){
val = 'scoop';
});
$('#two').on('click', function(){
val = 'swoosh';
});
$('#three').on('click', function(){
val = 'spoon';
});
$('#main').on('click', function(){
console.log(val);
//Expected value: scoop&swoosh&spoon
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div><button id="one" type="button" class="btn btn-dark m-3">Dark</button></div>
<div><button id="two" type="button" class="btn btn-danger m-3">Danger</button></div>
<div><button id="three" type="button" class="btn btn-warning m-3">Warning</button></div>
<hr />
<div><button id="main" type="button" class="btn btn-info btn-block">Info</button></div>

Currently, each click resets the variable, assigning a new value. Consider using an Array and updating it with a new item for each click.
Example:
let val = [];
$('button').on('click', function() {
switch ($(this).attr("id")) {
case "one":
val.push('scoop');
break;
case "two":
val.push('scoop');
break;
case "three":
val.push('scoop');
break;
}
});
$('#main').on('click', function() {
console.log(val.join(" & "));
// Example Value: scoop & swoosh & spoon
// Clear the array
val = [];
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div><button id="one" type="button" class="btn btn-dark m-3">Dark</button></div>
<div><button id="two" type="button" class="btn btn-danger m-3">Danger</button></div>
<div><button id="three" type="button" class="btn btn-warning m-3">Warning</button></div>
<hr />
<div><button id="main" type="button" class="btn btn-info btn-block">Info</button></div>

onclick function javascript

I have a textarea and 3 buttons and I need to align text with this 3 buttons: left, center, right
<button type="button" onclick="myFunction()">LEFT</button>
<script>
function myFunction() {
document.getElementById("myP").style.textAlign = "left";
}
</script>
<button type="button" onclick="myFunction()">CENTER</button>
<script>
function myFunction() {
document.getElementById("myP").style.textAlign = "center";
}
</script>
<button type="button" onclick="myFunction()">RIGHT</button>
<script>
function myFunction() {
document.getElementById("myP").style.textAlign = "right";
}
</script>
<textarea name="textarea" id="myP" rows="10" cols="40"></textarea>
</div>

function myFunction(align) {
document.getElementById("myP").style.textAlign = align;
}
<button type="button" onclick="myFunction('left')">LEFT</button>
<button type="button" onclick="myFunction('center')">CENTER</button>
<button type="button" onclick="myFunction('right')">RIGHT</button>
</script>
<textarea name="textarea" id="myP" rows="10" cols="40"></textarea>
</div>

jQuery multiple plus/minus Counter

I want to have multiple plus/minus counters on my page.
I have one working counter but want to make it generic so that multiple counters can have a different initial value and increase and decrease as clicked.
$('.counter-btn').click(function(e) {
e.preventDefault();
var $btn = $(this);
$('.output').html(function(i, val) {
val = val * 1 + $btn.data('inc');
return (val <= 0 ? '' : '+') + val;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="counter-btn" id="increase1" type="button" data-inc="1">+</button>
<button class="counter-btn" id="decrease1" type="button" data-inc="-1">-</button>
<div class="output">+30</div>
<hr />
<button class="counter-btn" id="increase1" type="button" data-inc="1">+</button>
<button class="counter-btn" id="decrease1" type="button" data-inc="-1">-</button>
<div class="output">+30</div>
Fiddle Link:
http://jsfiddle.net/u2Lh7dbp/
Thanks

Each output element should be unique so it can be called by itself.
$('.counter-btn').click(function(e) {
e.preventDefault();
var $btn = $(this);
$('#output-' + $btn.data('index')).html(function(i, val) {
val = val * 1 + $btn.data('inc');
return (val <= 0 ? '' : '+') + val;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="counter-btn" id="increase1" type="button" data-index="1" data-inc="1">+</button>
<button class="counter-btn" id="decrease1" type="button" data-index="1" data-inc="-1">-</button>
<div class="output" id="output-1">+30</div>
<hr />
<button class="counter-btn" id="increase2" type="button" data-index="2" data-inc="1">+</button>
<button class="counter-btn" id="decrease2" type="button" data-index="2" data-inc="-1">-</button>
<div class="output" id="output-2">+30</div>
I've added a new data attribute: index. You can use that index to specify the exact output element you're looking for by its id.

Keeping it simple, you can have two functions and directly associate the onClick callback to these functions, making it more clear on the html side.
function add(id) {
var newCount = parseInt($(id).text()) + 1;
$(id).text(newCount);
}
function substract(id) {
var newCount = parseInt($(id).text()) - 1;
$(id).text(newCount);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="add('#output1')">+</button>
<button type="button" onclick="substract('#output1')">-</button>
<div id="output1">30</div>
<hr />
<button type="button" onclick="add('#output2')">+</button>
<button type="button" onclick="substract('#output2')">-</button>
<div id="output2">30</div>

This Javascript function I have bound to an HTML button isn't running at all

The clear() function in this code is not running when I press the "C" button (i.e. it isn't even printing to console) even though all the other buttons work fine. I'm sure I've missed something obvious but I cannot see it. Please help me find it:
<html>
<head>
<script type="text/javascript">
var total = 0;
function add(x) {
total += x;
document.getElementById('total').innerHTML = total;
}
function clear() {
console.log('cleared');
var total = 0;
document.getElementById('total').innerHTML = 0;
}
</script>
</head>
<body>
<p id="total">0</p>
<p>
<button type="button" onclick="add(1)">1</button>
<button type="button" onclick="add(2)">2</button>
<button type="button" onclick="add(3)">3</button><br>
<button type="button" onclick="add(4)">4</button>
<button type="button" onclick="add(5)">5</button>
<button type="button" onclick="add(6)">6</button><br>
<button type="button" onclick="add(7)">7</button>
<button type="button" onclick="add(8)">8</button>
<button type="button" onclick="add(9)">9</button><br>
<button type="button" onclick="clear()">C</button>
</p>
</body>
</html>

window.document.clear is Native API hence function clear() is shadowed, Use some other function name.
<html>
<head>
<script type="text/javascript">
var total = 0;
function add(x) {
total += x;
document.getElementById('total').innerHTML = total;
}
function clearVal() {
console.log('cleared');
total = 0;
document.getElementById('total').innerHTML = 0;
}
</script>
</head>
<body>
<p id="total">0</p>
<p>
<button type="button" onclick="add(1)">1</button>
<button type="button" onclick="add(2)">2</button>
<button type="button" onclick="add(3)">3</button><br>
<button type="button" onclick="add(4)">4</button>
<button type="button" onclick="add(5)">5</button>
<button type="button" onclick="add(6)">6</button><br>
<button type="button" onclick="add(7)">7</button>
<button type="button" onclick="add(8)">8</button>
<button type="button" onclick="add(9)">9</button><br>
<button type="button" onclick="clearVal()">C</button>
</p>
</body>
</html>
Note: You are initializing variable total in clearVal function, not redefining it as 0, remove keyword var to update global variable.

Not suggested but hacked way to do it and freaking cooool:
window.document.clear is Native API hence function clear() is shadowed
But if you still want to keep the clear function name, you can also
override the window.document.clear a function like shown below.
<html>
<head>
<script type="text/javascript">
var total = 0;
function add(x) {
total += x;
document.getElementById('total').innerHTML = total;
}
window.document.clear = function() {
console.log('cleared');
total = 0;
document.getElementById('total').innerHTML = 0;
};
</script>
</head>
<body>
<p id="total">0</p>
<p>
<button type="button" onclick="add(1)">1</button>
<button type="button" onclick="add(2)">2</button>
<button type="button" onclick="add(3)">3</button><br>
<button type="button" onclick="add(4)">4</button>
<button type="button" onclick="add(5)">5</button>
<button type="button" onclick="add(6)">6</button><br>
<button type="button" onclick="add(7)">7</button>
<button type="button" onclick="add(8)">8</button>
<button type="button" onclick="add(9)">9</button><br>
<button type="button" onclick="clear()">C</button>
</p>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Wipe Last Input From Onclick Button - javascript

Related

How do I disable multiple buttons when I click a button

Save values of multiple clicks and get all values inline

onclick function javascript

jQuery multiple plus/minus Counter

This Javascript function I have bound to an HTML button isn't running at all

Categories

Resources