I want to know how i can make a javascript that pushes a button on a website. I have tried to search the forum but nothing i have found is working. the button i am trying to make the script for is:<button class="btn btn-danger btn-lg btn-block betButton" data-lower="1" data-upper="7"><span> 1 to 7</span><span></span></button> it is located under 7 "div"
Something like this:
<html>
<body>
<button id="myButton" class="btn btn-danger btn-lg btn-block betButton" data-lower="1" data-upper="7" onclick="alert('hello');"><span> 1 to 7</span><span></span>
</button>
<script type="text/javascript">
document.getElementById('myButton').click();
</script>
</body>
</html>
Related
The bootstrap float-right class did not work with my buttons.
This is my html code snippet:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<button type="button"
id="reset_button"
class="btn btn-outline-secondary btn-lg float-right"
disabled="disabled">Reset</button>
<button type="button"
id="convert_button"
class="btn btn-primary btn-lg float-right"
disabled="disabled">Submit</button>
</div>
I want to make buttons align right but when I add the float-right class in both the buttons it doesn't work.
Can anyone please tell me what's wrong with my code and how can I fix this...
Instead of float there are probably better Bootstrap options.
Try removing the float-right and instead use d-flex with justify-content-end on the top line of your code like this....
<div class="container-fluid d-flex justify-content-end">
<button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg" disabled="disabled">Reset</button>
<button type="button" id="convert_button" class="btn btn-primary btn-lg"
disabled="disabled">Submit</button>
</div>
The code is working for me. I just copied your snippet and buttons are on the right side.
Problem is meaby in parent DIRs with different CSS or something else is rewriting your style.
You can also see this, when you run your snippet here.
Like previous answers has stated, maybe there are some other styles in a parent div or element that aren't compatible with the float classes.
Try adding in a parent div the clearfix Bootstrap class, that should solve the issue in your code.
I have a page with two buttons connected to two different bootstrap modals. They were all working fine but all of a sudden stopped. Whenever I click on either button now, the page just keeps refreshing as opposed to displaying the respective modal. I do not know what the problem is as there is no error in the console.
The site is hosted on https://storzy.netlify.app/
I have searched high and low but can't seem to find what might be stopping the modal from displaying correctly now.
Please how do I go about stopping the page from refreshing and showing the correct modal instead?
Thank you.
change the form to div for your login and signup parents
<div class="form-inline mt-3 mt-lg-0">
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal">Sign up</button>
</div>
If the button is within a form, the default behavior is submit. If the button is not within a form, it will do nothing.
Hence to avoid the page refresh, add type="button" to the buttons to prevent it.
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" type="button">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal" type="button">Sign up</button>
I have a lot of buttons that look like:
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="foo">Foo</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="bar">Bar</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="baz">Baz</button>
I'd like to avoid so much repetition; is there any way to define some sort of single attribute that will expand to several other attributes? For example it might end up looking like
super x = 'type="button" class="btn btn-info" data-toggle="modal" data-target="#qq"';
<button super="x" data-req="foo">Foo</button>
<button super="x" data-req="bar">Bar</button>
<button super="x" data-req="baz">Baz</button>
NB. Of course this could be done with server-side scripting but I'm hoping to avoid that. I am using Bootstrap 3.3.4 , these buttons trigger a Bootstrap modal.
This works:
<button type="button" class="x" data-req="foo">Foo</button>
<button type="button" class="x" data-req="bar">Baz</button>
<button type="button" class="x" data-req="baz">Baz</button>
and in the Javascript section
$("button.x").addClass("btn btn-info");
$("button.x").attr("data-toggle", "modal");
$("button.x").attr("data-target", "#qq");
This removes most of the repetition however I am still wondering if there is a more elegant and/or runtime-efficient way.
Sounds like you might be looking for a client side view framework such as Handlebars or React.js. Where you can send (and cache) the templates on the client and then bind to JSON you retrieve from the server.
You could use a full stack framework such as Ember.js or Angular, but that is probably more than you need.
Any reason why this wouldn't work?
<button class="btn btn-primary btn-lg" onClick="location.href='http://anothersitehere.com/file.pdf'">Download PDF</button>
You would try with this instead
<a class="btn btn-primary btn-lg" href="http://anothersitehere.com/file.pdf">
Download PDF
</a>
Leaving location.href blank and in javascript function give
document.location.href='page.php?variable='+value;
it will redirect to the page you want.
It's seems that it is working regarding on going to the link. I'm using Chrome btw.
I have a a list that is generated via PHP and SQL and within each styled row I have a favorite button. I want it so when I click the favorite button it toggles a class that changes the color of it.
It works for the first one but any other button in my list doesn't work.
<button id="favorite" type="button" class="btn btn-xs btn-success" title="Follow">
<span class="glyphicon glyphicon-star"></span>
</button>
<script>
$("#favorite").click(function() {
$(this).toggleClass('clicked');
});
</script>
I looked on similar questions before posting but I didnt see anything related to what I'm trying to accomplish and even google didn't really help me. I'm sure this is a simple task. I'm fairly new to JQuery
If you change your id to a class, your code should work fine:
<button class="favorite btn btn-xs btn-success" type="button" title="Follow">
<span class="glyphicon glyphicon-star"></span>
</button>
<script>
$(".favorite").click(function() {
$(this).toggleClass('clicked');
});
</script>
You are using the same ID for multiple elements. Add a class of favourite and try doing this instead:
$(".favorite").click(function() {
$(this).toggleClass('clicked');
});