So I've got this menu where you can choose the class in my game.
<div class="text">
<div id="story">Choose a class.</div>
<input type="button" class="knight" value="Knight"/>
<input type="button" class="mage" value="Mage"/>
<input type="button" class="archer" value="Archer"/>
</div>
How do I use jquery so that when I press any of these buttons, I'll get a new set of buttons which you can press to choose your race?
I've tried .replaceWith() but jquery won't work on the new buttons.
It will take the css.
function classChange() {
var Class = $(this).val();
$('#statsImg').text("class: " + Class);
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>');
$('.mage').replaceWith('<input type="button" class="human" value="Human"/>');
$('.archer').replaceWith('<input type="button" class="Dwarf" value="Dwarf"/>');
$('.menu').show();
};
$('.knight').click(classChange);
$('.mage').click(classChange);
$('.archer').click(classChange);
Button elf won't do anything with the next part:
$('.elf').on('click', '.elf',function () {
$('#statsImg').text('test');
});
Works with button knight/mage/archer.
So what I'd like to know is how do I get rid of this menu and get a new menu once I press a button?
Sorry if I forgot to add something that you need to know. I'll add it if you need it.
You have to bind the events to the buttons after adding them. Try with -
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>').bind('click', function() {
$('#statsImg').text('test');
});
Related
I'm quite new to all this but I learned quite quickly, as it's really easy in my opinion. I'm trying to make a button hide a <p> tag that another button spawned. How can make the button (At the bottom of code) make the <p> tag disappear?
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
You have to define the called function and using display:none hide the paragraph
function myFuction() {
document.getElementById('date_button').style.display = 'none'
}
<button type="button" onclick="document.getElementById('date_button').innerHTML = Date();document.getElementById('date_button').style.display='block'">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
In your case you want to show it again so you need to set its innerHTML to ''. In your case if you will do style.display = 'none'. It will not show <p> again
function myFunction(){
document.getElementById('date_button').innerHTML = '';
}
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFunction()">Click this to hide date.</button>
Try this. I think this can help
function myFuction() {
document.getElementById('date_button').style.display = 'none';
}
I am using multiple buttons and my problem is when i am clicking on any button then the text changes of first button, but not that button on which i am clicking. I am using here same button id for all buttons but it is hard to use different button id's for such multiple buttons so what is any other simple way without using different id's.
I want to change only one button at a time on which i am clicking but not other buttons. PLEASE HELP..!
html code
user1
<input type="button" value="Connect" id="toggle" onclick="myFunction()">
user2
<input type="button" value="Connect" id="toggle" onclick="myFunction()">
user3
<input type="button" value="Connect" id="toggle" onclick="myFunction()">
and so on...
and js function is
function myFunction()
{
var change = document.getElementById("toggle");
if (change.value=="Connected") change.value = "Connect";
else change.value = "Connected";
}
You can do it like this as well? You can change your onclick events as follows:
Change onlick functions to this: onclick ="myFunction(this)"
And Update your javascript function to be like the following:
function myFunction(obj) {
if (obj.value == "Connected")
obj.value = "Connect";
else
obj.value = "Connected";
}
You cant use same Id for multiple elements. Simply you can use class instead of Id. Then your code will look like that :
$(".toggle").click(function(){}
$(this).text("Whatever");
})
I am adding a div around a link on click of a button. but when i click button multiple times, it adds multiple divs.
<li>
<label> </label>
<div class="deletebutton">
<label> </label>
<div class="deletebutton">
<label> </label>
<div class="deletebutton">
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</div>
</div>
</li>
How can i make sure that it first checks if there is a div around link and then adds.
I am using following code:
var parentTag = $(".ruRemove").parent().get(0).tagName;
if (parentTag == 'LI') {
$(".ruRemove").wrap("<div class='data deletebutton'></div>");
$(".deletebutton").before("<label></label>");
} else {
var par = $('.deletebutton').parent();
if (par.is('div')) par.remove();
$(".ruRemove").wrap("<div class='data deletebutton'></div>");
var prev = $('.deletebutton').prev();
if (prev.is('label')) prev.remove();
$('.deletebutton').before("<label></label>");
}
it should become this:
<li>
<label> </label>
<div class="deletebutton">
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</div>
</li>
when i click button. before clicking html is:
<li>
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</li>
Here is a solution shown in a jsFiddle.
The code story is
HTML
<button id="myButton">My Button</button
JavaScript
$(function() {
$("#myButton").click(function() {
if ($(this).parent().get(0).tagName !== "DIV") {
$(this).wrap("<div class='myDiv'>");
}
});
});
What the code does is register a callback for a button click. When clicked, we ask for the parent of the button that was clicked and ask if the parent node has a tag name of "DIV" meaning it is a <div>. If it is not a div, then we wrap the button in a div and end. On the next call, the detection of the parent being a div will be true and no new div will be added.
Why don't you just use for example a function that does what you want only on the first click?
So only on the first click of that button adds the div, if you click other times the button, it wont do anything. This way you wont add multiple divs.
To do that you could use for example jQuery:
<script type="text/javascript">
$("#firstclick").one("click",function() {
alert("This will be displayed only once.");
});
</script>
You can check even the jQuery API Documentation regarding one:
http://api.jquery.com/one/
I'm using the following HTML code for button creation. I've applied the classes from bootstrap to these buttons.
<label class="help-block" for="xlInput">Monetization</label>
<div id="revsource" class="btn-group" data-toggle="buttons-checkbox">
<button id="revenueSource" class="btn monibtn active" value="1" data-toggle="button" type="button">Advertise</button>
<button id="revenueSource" class="btn monibtn" value="2" data-toggle="button" type="button">License</button>
<div class="controls">
<input id="revenueSource1" type="hidden" 0="0" name="data[RevenueSource][revenue_source_id]" value="1,2">
</div>
</div>
Now what I want is the value or values of the buttons selected by user. Means if user selects button 1 then I want the concerned value of button 1. If he selects button 2 only then the concerned value of button 2 I should get and if user selects both the buttons then I should get the values of both buttons. For achieving this I tried following code but it didn't work. Can anyone please help me out in this thing? Thanks in advance.
$('.monibtn').click(function(){
var selected = [];
$('.monibtn').each(function(){
if($('.monibtn').hasClass('active')) {
selected.push($(this).val());
$('#revenueSource1').val(selected);
}
});
});
You can use .map() along with the target selector .monibtn.active
$('.monibtn').click(function () {
//get all .monibtn elements with class active and create an array with the value of those elements
var selected = $('.monibtn.active').map(function () {
return this.value;
}).get();
//assing the value of the selected array to the target element
$('#revenueSource1').val(selected.join());
});
I am using bootstrap checkbox button to have a button group.
When a user clicks on one of the buttons, it becomes active.
I use the function below to check which button is active and which is not and then use this data in the rest of the function.
as you can see in the jsfiddle, the results are delayed, and it would be correct if I would change is to was. But I need the test in the function I'm using, not on the next call to the function.
Can someone explain to me why this happen and if my hasClass check is correct for this kind of situation?
HTML:
<div class="box btn-group" data-toggle="buttons-checkbox">
<button data-filter="a" id="a" name="button" type="button" class="btn">A</button>
<button data-filter="b" id="b" name="button" type="button" class="btn">B</button>
</div>
CSS:
$(".box").on('click', function(){
alert("a is " + ($("#a").hasClass("active") ? "active" : "not-active"));
alert("b is " + ($("#b").hasClass("active") ? "active" : "not-active"));
});
jsfiddle
Twitter Bootstrap automatic bindings works at document level, which means that your click event at .box level still doesn't know about the change of state of the buttons.
You can drop the automatic binding removing the data-toggle attribute for this group of checkboxes and use .button() as documented in the Twitter Bootstrap API.
<div class="box btn-group">
<button data-filter="a" id="a" name="button" type="button" class="btn">A</button>
<button data-filter="b" id="b" name="button" type="button" class="btn">B</button>
</div>
$(".box").on('click', '.btn', function(){
$(this).button("toggle");
alert("a is " + ($("#a").hasClass("active") ? "active" : "not active"));
alert("b is " + ($("#b").hasClass("active") ? "active" : "not active"));
});
See it here.