Bootcamp sample html file suggests a button written like this:
<p><a class="btn btn-primary btn-lg" onclick="run_update()" role="button">Button</a></p>
Though, I've written button always like this
<button class="btn btn-primary" onclick="run_update()">Button</button>
They seems identical and functions similarly. I'm wondering are they any different or will they impact performance everso slighly?
For this, always go for .addEventListener() instead of onclick. onclick is not recommended for executing an action in JS.
MDN (Mozilla Developer Network) also states that .addEventListener must be used instead of onclick.
For the button, it doesn't affect the overall meaning and work of it. A button doesn't cause a change when inside a p tag.
Related
I'd like to remove or disable a couple of buttons from the reply editor of a phpbb forum I'm a member of, because the bbcodes they insert are too tempting but for some reason reserved for "more mortals".
Removing is probably the easiest solution; I have already identified what code to remove to achieve this:
</button>
<button type="button" class="button button-secondary bbcode-anchor" name="addbbcode24" value="anchor" onclick="bbstyle(24)" title="Anchor: [anchor]Name of the anchor[/anchor]">
anchor
</button>
<button type="button" class="button button-secondary bbcode-goto" name="addbbcode26" value="goto" onclick="bbstyle(26)" title="Goto: [goto=Anchor Name]Link tekst[/goto]">
goto
</button>
In the old days I would do this via a filter in Privoxy but nowadays that requires setting up its https_inspection, which I'd prefer to avoid.
I think it should be possible to do this via an in-browser userscript, e.g. via Tampermonkey. I found a promising JS function on here (https://stackoverflow.com/a/50537862/1460868) but have little idea for now how to deploy it (I have no knowledge of Javascript):
the function uses node.textContent.replace(); does it take simple expression (if so, how to pass a multi-line pattern?) or a regexp (and if so, what flavour)?
some guidelines/pointers as to how to put this function in a user.js/tampermonkey script would be appreciated.
Thanks in advance!
I'm trying to select this button using protractor:
<button tabindex="-1" type="button" class="btn btn-default pull-left" ng-click="$arrowAction(-1, 0)">
<i class="glyphicon glyphicon-chevron-up">
</i>
</button>
the only unique element in this is ng-click="$arrowAction(-1, 0)"
Nothing I have tried works:
element(by.css("//button[#ng-click='$arrowAction(-1, 0)']")).click();
//button[#ng-click='$arrowAction(-1, 0)'] is not a valid CSS selector. It actually looks like this is an XPath expression and you meant to use by.xpath() locator.
You can though use the partial attribute check instead:
$("button[ng-click*=arrowAction]").click();
$ here is a shortcut to element(by.css(...)), *= means "contains".
Or, do an exact match:
$("button[ng-click='$arrowAction(-1, 0)']").click();
I still don't like the location technique used in this case, but, given what we have, it is probably the best we can do. Ideally, if you have control over the application code and templates, add a meaningful id, class or a custom data attribute to uniquely identify the element.
I use AngularJS in my single-page application. Somewhere I have defined a button like this
<button class="btn btn-success" onclick="doSeekTo({{todo.position}});doPlay();">
This button, when clicked, invokes the javascript function with the given parameter in double curly braces, as usual with AngularJS.
This all works well in IE9, but when looking at the error console, it says “Expected identifier, string or number” at the position of my curly braces.
How to get rid of this error? It makes me feel uncomfortable.
In Angular, you're not supposed to use the built in onclick event, but rather Angular's ng-click event. That way you can write
ng-click="doSeekTo(todo.position);doPlay()"
IE9 is parsing the HTML before your angularjs code modifies it. Maybe some indirection like this would help ...
<button class="btn btn-success" paramvalue="{{todo.position}}" onclick="doSeekTo(this.paramvalue);doPlay();">
Another option is to enclose the {{}} in single quotes such that IE interprets it as a string:
<button class="btn btn-success"> onclick="doSeekTo('{{todo.position}}');doPlay();">
I have to render a html page residing in templates/home.html
I have a button in index.html as:
<div id="browse_app">
<button class="btn btn-large btn-info" type="button">Browse</button>
</div>
All I want to do is when I click on Browse, it takes me to home.html
I tried to write jQuery as:
// onClick on 'Browse' load the internal page
$(function(){
$('#browse_app').click(function(){
$.load('templates/home.html');
});
});
But this doesn't work since load needs to put data somewhere in current page
How do I get to the home.html on button click?
As far as I can tell you are using Twitter Bootstrap. The documentation for Buttons addresses your point:
Default buttons
Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.
This is what you want:
<div id="browse_app">
<a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>
In the worst case scenario, this way the rendering of the button won't look nice but the link will work. Using JS, your worst case scenario will render the link useless.
Use: onclick="window.location='INSERT HTML FILE HERE'" in your button tag
One I prepared earlier:
<button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">« About HerdMASTER 4</button>
I wanted to go to the directory Learn from another directory in the same folder
It's a more elegant solution using the bootstrap class that is included, meaning you don't have to hack code into your page. I wish there was a bit more functionality documentation about the various classes for bootstrap as I figured this out from the above code rather than finding it by a google search.
Use this:
$(function(){
$('#browse_app').click(function(){
window.location='templates/home.html'
});
});
Use onclick="window.open('YourPage.aspx','_self');"
For Example:
<button type="submit" onclick="window.open('YourPage.aspx','_self');" class="btn btn-default">Your Page</button>
Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?
Button currently looks like:
<button>Visit Page Now</button>
What I would prefer not to have:
<button>Visit Page Now</button>
The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.
Looking forward to hearing some options/opinions.
Inline Javascript:
<button onclick="window.location='http://www.example.com';">Visit Page Now</button>
Defining a function in Javascript:
<script>
function visitPage(){
window.location='http://www.example.com';
}
</script>
<button onclick="visitPage();">Visit Page Now</button>
or in Jquery
<button id="some_id">Visit Page Now</button>
$('#some_id').click(function() {
window.location='http://www.example.com';
});
Here's a solution which will work even when JavaScript is disabled:
<form action="login.html">
<button type="submit">Login</button>
</form>
The trick is to surround the button with its own <form> tag.
I personally prefer the <button> tag, but you can do it with <input> as well:
<form action="login.html">
<input type="submit" value="Login"/>
</form>
Just do this
<button OnClick=" location.href='link.html' ">Visit Page Now</button>
Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.
LINKS ARE TRICKY
Consider the tricks that <a href> knows by default but javascript linking won't do for you. On a decent website, anything that wants to behave as a link should implement these features one way or another. Namely:
Ctrl+Click: opens link in new tabYou can simulate this by using a window.open() with no position/size argument
Shift+Click: opens link in new windowYou can simulate this by window.open() with size and/or position specified
Alt+Click: download targetPeople rarely use this one, but if you insist to simulate it, you'll need to write a special script on server side that responds with the proper download headers.
EASY WAY OUT
Now if you don't want to simulate all that behaviour, I suggest to use <a href> and style it like a button, since the button itself is roughly a shape and a hover effect. I think if it's not semantically important to only have "the button and nothing else", <a href> is the way of the samurai. And if you worry about semantics and readability, you can also replace the button element when your document is ready(). It's clear and safe.
Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,
#btn {
background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
display: block;
width: 128px;
height: 128px;
border: none;
outline: none;
}
You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go' into its onclick handler. This does not work without javascript enabled though.
Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.
(actually, forget the second solution - if you can't use a form, the submit button is out)
<form action="portfolio.html">
<button type="link" class="btn btn-primary btn-lg">View Work</button>
</form>
I just figured this out, and it links perfectly to another page without having my default link settings over ride my button classes! :)
Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/
<button id="x">test</button>
$('#x').click(function(){
location.href='http://cnn.com'
})
Assuming that in your HTML file you've a button with id="Button", In the script.js(your script file), you can use this way:
document.getElementById("Button").addEventListener("click", gotoUrl);
function gotoUrl() {
window.location.assign("https://www.google.com/");
}
Now the button will lead you to Google!
For more info: https://www.w3schools.com/js/js_window_location.asp
You can also try this<button type=“Submit”><a href=“”>#</a></button>