I want 4 buttons next to each URL, you can then click on a button to copy the parent url to the buttons respective textfield.
I presume that it is easiest to do this using jquery but I have no clue where to start. Any advice would be much appreciated!
http://jsfiddle.net/WwdMw/
<div class="selection">
<div class"url">
<h2>example1.com</h2>
</div>
<button type="button" class="btn_opt1">Copy to Option1</button>
<button type="button" class="btn_opt2">Copy to Option2</button>
<button type="button" class="btn_opt3">Copy to Option3</button>
<button type="button" class="btn_opt4">Copy to Option4</button>
</div>
<hr/>
<div class="selection">
<div class"url">
<h2>example3.com</h2>
</div>
<button type="button" class="btn_opt1">Copy to Option1</button>
<button type="button" class="btn_opt2">Copy to Option2</button>
<button type="button" class="btn_opt3">Copy to Option3</button>
<button type="button" class="btn_opt4">Copy to Option4</button>
</div>
<hr/>
<div class="selection">
<div class"url">
<h2>example2.com</h2>
</div>
<button type="button" class="btn_opt1">Copy to Option1</button>
<button type="button" class="btn_opt2">Copy to Option2</button>
<button type="button" class="btn_opt3">Copy to Option3</button>
<button type="button" class="btn_opt4">Copy to Option4</button>
</div>
<hr/>
Have it.
$('button').click(function () {
var value = $(this).parent().find('h2').text();
var idIdentifier = $(this).text().substr($(this).text().length - 1);
var textArea = $('div[class*='+idIdentifier+']').find('textarea');
textArea.val(textArea.val() +" "+ value);
})
Live Demo
Related
I'm a beginner trying to create an online calculator in JS. I made buttons, looped through them, and then created a function that looks to click and display numbers on the screen with innerHTML of the screen. but It is saying undefined. Here is the code.
var screen = document.getElementById("screen")
var allButtons = document.getElementsByClassName('buttons');
for (var i = 0; i < allButtons.length; i++) {
allButtons[i].addEventListener('click', pressButton)
}
function pressButton(event){
var numID = this.id; // activates ID for each button the event listener above
screen.innerHTML = numID;
};
One example of how you could do it:
const screen = document.getElementById("screen")
const allButtons = document.getElementsByClassName('buttons');
Array.prototype.forEach.call(allButtons, (e) => e.addEventListener('click', () => screen.innerHTML += e.innerHTML));
<div id="screen"></div>
<br><br>
<div class="buttons">Button1 </div>
<div class="buttons">Button2 </div>
<div class="buttons">Button3 </div>
Did you add the id attribute to all the buttons you created? It is possible that it is saying undefined cause it can't find the id attribute.
<!DOCTYPE html>
<html>
<head>
<title>Online Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="calc.css">
</head>
<body>
<textarea id="screen" placeholder="0"></textarea>
<div class="buttonswrap">
<button id="num1" class= "buttons" value="1">1</button>
<button id="num2" class= "buttons" value="2">2</button>
<button id="num3" class= "buttons" value="3">3</button>
<button id="num4" class= "buttons" value="4">4</button>
<br>
<button id="num5" class= "buttons" value="5">5</button>
<button id="num6" class= "buttons" value="6">6</button>
<button id="num7" class= "buttons" value="7">7</button>
<button id="num8" class= "buttons" value="8">8</button>
<br>
<button id="num9" class= "buttons" value="9">9</button>
<button id="num0" class= "buttons" value="0">0</button>
<button id="plus" class= "buttons" value="+">+</button>
<button id="multiply" class= "buttons" value="*">*</button>
<br>
<button id="divide" class= "buttons" value="/">/</button>
<button id="minus" class= "buttons" value="-">-</button>
<button id="point" class= "buttons" value=".">.</button>
<button id="equals" class= "buttons" value="=">=</button>
</div>
<script type="text/javascript" src="calc.js"></script>
</body>
</html>
Here is my HTML
I'm only starting to delve into javascript and have no real knowledge of how to work with jQuery, but I'm working on a page which features a control panel. I'm trying to get the functions of the control panel to change on clicking a button on it.
Here's what I have so far;
html:
<div id="functions">
<button id="prob" onclick="myproblem()" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
Javascript:
function myproblem() {
document.getElementById("functions").html('
<button id="prob" onclick="myproblem()" type="button" title="prob"></button>
<button id="button3" onclick="works3()" type="button" title="button3"></button>
<button id="button4" onclick="works4()" type="button" title="button4"></button>');
}
The button I want to use to change the html is contained within the div which is getting changed. There are other onclick functions in that div which were working fine until I wrote the myproblem() code into my js file. With that section of code there, none of my js works.
This is a localhosted page, it won't be online.
I'm assuming I need to use jQuery to pull this off, but I have no idea how.
Thanks,
Use the innerHTML() method in JavaScript:
function myproblem() {
document.getElementById("functions").innerHTML ='<button id="prob" onclick="myproblem()" type="button" title="prob"></button> <button id="button3" onclick="works3()" type="button" title="button3"></button> <button id="button4" onclick="works4()" type="button" title="button4"></button>'
}
In Jquery you can use the html method
$(".functions").html('Your html code goes here')
<div class="temp01" style="display:none">
<button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
<div class="temp02" style="display:none">
<button id="prob" onclick="myproblem('temp01')" type="button" title="prob"></button>
<button id="button3" onclick="works3()" type="button" title="button3"></button>
<button id="button4" onclick="works4()" type="button" title="button4"></button>
</div>
<div class="functions">
<button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
<script>
function myproblem(x){ //x could be "temp01" or "temp02"
$(".functions").html("");
$("." + x).clone().attr("id","functions").show().appendTo(".functions");
}
</script>
I am trying to change between colors on click in jquery. According to the picture below I have the default value
and then in this image when I click on the input box and then back on a button the background color stays on the input box rather than dissappears when any other button is clicked.
i'd like the background color to disappear when any of the buttons are clicked.
here is my jquery:
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
else{
$(this).removeAttr("background-color")
$("#default").addClass('active');
}
});
and here is my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
</fieldset>
</div>
any help would be appreciated!
Try
$(this).css("background-color", "")
Instead of this
$(this).removeAttr("background-color")
You cannot remove the background-color like this as it is not an attribute.
On click of button you should remove the class active from the donation-amount
what you have written will only work as toggle on the custom button only. Its not interacting with rest of the buttons.
Flow should be to remove class from custom button if any button is hit and if custom button is hit remove class from any of button.
$(".selectvalue").each(function(){
$(this).click(function(){
$("#donation-amount").removeClass('active');
})
});
$("#donation").click(function(){
$(".selectvalue").removeClass('active');
})
Is this the functionality you are looking for? Also added in fiddle
Instead of background color, just use the .active class
$('#donation-amount,#default, #btn2, #btn3').click(function(event) {
//add any other checks you want here
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
$("#donation-amount").removeClass('active');
$(event.target).addClass('active');
});
.active{
background-color:#c97e06;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
I thought this code satisfied your requirement.
if your problem is not solve then write comment in explain then I can do it.
Please vote for me.
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
console.log("hello");
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
});
$("body").on("click","#default,#btn2, #btn3",function(){
//console.log($(this));
$("#donation-amount").css("background-color","rgb(255,255,255)");
//$("#default").addClass('active');
}
This seems a bit complicated the way you have it. This is a classic "choice highlight" scenario and is easily handled with a simple $(this).addClass('active').siblings().removeClass('active'); to set and remove the active highlight.
I also took the liberty of making the assumption you want some CUSTOM amount so I added a simple input for that to use with the CUSTOM button. I also simplified the custom button by using the data attribute and removed the code from that as frankly it seemed weird to have in there.
HTML with some adjustments:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" class="btn btn-default selectvalue hover-color choice default active " value="50">50</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="100">100</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="150">150</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="" id="donation-amount" data-defaultvalue="57">Custom</button>
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
<div class="container">Custom Amount
<input id="customamount" type="text" value="67" />
</div>
Code that sets the color using an active class and sets the custom amount in the hidden field (or default if it has none)
$(".choice").on('click', function() {
if ($(this).is("#donation-amount")) {
var mydefault = $(this).data("defaultvalue");
// use custom amount if it has one, otherwise use this custom default
this.value = $('#customamount').val() || mydefault;
}
$(this).addClass('active').siblings().removeClass('active');
$('#donation-amount-value').val(this.value);
$('#display-amount').text('$'+this.value);
});
CSS:
.active {
background-color: #c97e06;
}
You can play around with it here: https://jsfiddle.net/MarkSchultheiss/6Lj62ngs/1/
I use bootstrap modal dialog.
My modal:
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Hello</h4>
</div>
<div class="modal-body">
Your name:
<input id="colorData" name="colorData" type="hidden" value=""/>
<input id="nameData" name="nameData" class="input-lg" type="text" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="postAnswer" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
I have buttons:
<div align="center" style="margin-bottom: 20px">
<button value="all" type="button" class="btn btn-lg btn-default">All</button>
<button value="green" type="button" class="btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="btn btn-lg btn-info">Blue</button>
</div>
And i have script:
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
var color = $(this).val();
$(".modal-body #colorData").val(color);
// $('#colorData').val() - is not empty
$("#myModal").modal('show');
});
$('#postAnswer').click(function (e) {
e.preventDefault();
$.ajax({
// $('#colorData').val() is empty
// $('#nameData').val() is not empty (I write this on dialog)
url: "#Url.Action("WriteAnswer", "Home")?name=" + $('#nameData').val() + "&color=" + $('#colorData').val(),
type: 'POST',
data: $('#nameData').serialize(),
success: function (data) {
//alert('successfully submitted');
}
});
$("#myModal").modal('hide');
});
});
</script>
After call function $(".btn").click element $('#colorData').val() is not empty.But! If I click button on modal then post empty value and value of input colorData is empty. Why? I wanna post data to controller, but value is reset. Sorry for my English.
You <button> element with id="postAnswer" also has class="btn", so when you click it, the $(".btn").click(function () { method is also called and var color = $(this).val(); returns null (because that button does not have a value attribute.
To handle this correctly, give an additional class name to the 3 'color' buttons (say)
<button value="all" type="button" class="color btn btn-lg btn-default">All</button>
<button value="green" type="button" class="color btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="color btn btn-lg btn-info">Blue</button>
and change the first script to
$(".color").click(function () {
var color = $(this).val();
$(".modal-body #colorData").val(color);
$("#myModal").modal('show');
});
I am trying to get a default value to display when the page loads.
I am trying to get the first button to always show by default in the display-donation div whenever someone navigates to the form.
At the moment, this is what it looks like when the page loads. 10 is highlighted but does not display.
Here is my html
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="15">15</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="20">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
Here is my JS
$(document).ready(function() {
$('#donation-amount').keyup(function() {
$('#display-amount').text($(this).val());
});
$( ".selectvalue" ).click(function() {
$('#display-amount').text($(this).val());
});
$(".buttons .btn").click(function(){
$(".buttons .btn").removeClass('active');
$(this).toggleClass('active');
});
});
any help would be appreciated!
You're currently asking for the value attribute of the display-amount div, which of course doesn't exist. You want something like $('#display-amount').text($('.active').val()); instead.
Try this - change line 3 to:
$('#display-amount').text($('button.active).val());
You need to show the class .active amount
Taking the amount from this:
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>