Develop Reference

How to change href of a button without ID

I'm trying to change the href on this element:
"<button onclick="smoothscroll()" class="btn btn-white btn-small" href="#contacto">blah blah <i class="fas fa-chevron-right"></i></button>"
It doesn't have an ID so I tried like this:
document.getElementsByClassName('btn btn-white btn-small')[0].href="https://www.mysite.cl/#"
But it doesn't seem to work.. any ideas? I have other element that works just like I want this button to work:
"<button onclick="smoothscroll()" class="btn" href="#">blah blah</button>"
But I also tried this:
document.getElementsByClassName('btn btn-white btn-small')[0].href="#"
And it doesn't work either

It is not advised to use href as attribute for html button, use this instead..
<a href = '#blablabla'>Scroll to bla bla bla </a>
Then add this css property to the page
html {
scroll-behavior: smooth;
}
The above css will automatically cause smooth scrolling each time a user scrolls by clicking a link.
But if you insist
Try this.. Change your buttons to
"<button onclick="smoothscroll(this)" class="btn btn-white btn-small" href="#contacto">blah blah <i class="fas fa-chevron-right"></i></button>"
Then your smoothscroll() function should look like..
function smoothscroll(button){
button.setAttribute('href', 'Your new link');
}

If you already know what the href is then select it using that.
Since href is not standard to a button Element, to update the href attribute, use setAttribute.
const button = document.querySelector('button[href="#contacto"]')
button.setAttribute('href', "#");
console.log(button)
<button onclick="smoothscroll()" class="btn btn-white btn-small" href="#contacto">blah blah <i class="fas fa-chevron-right"></i></button>
If you have control of the html, then you should look to change the button to an a element instead.

How to make the content text "rtl" in popover button via bootstrap

I have a pop hover button. I want to make it's text RTL. How can I do it?
<button
type = "button"
class = "btn btn-success btn-xs pop"
data-container = "body"
data-toggle = "popover"
data-placement = "right"
data-content = "hello world"
data-original-title = ""
title = "">help</button>

add:
style="direction:rtl;"
<button type="button" class="btn btn-success btn-xs pop" data-container="body" data-toggle="popover" data-placement="right" data-content="hello world"
data-original-title="" title="" style="direction:rtl;" >

A paragraph with a right-to-left direction:
<p dir="rtl">Write this text right-to-left!</p>
For your case, and as documented on bootstrap, you have the option to change the popover tempate via the attribute data-template
<div class="popover" role="tooltip" direction="rtl">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
In your code, add this attribute and set the direction to rtl both in title and body
<button data-template='<div class="popover" role="tooltip" dir="rtl"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' ...>
Help
<button>
HTML rtl attribute
bootstrap popovers

try using css, like so
.your-class-name{
direction: rtl;
}
Read the complete reference here

To all folks ending up here, in order to change direction or style text inside bootstrap's tooltip you can enable the HTML rendering inside tooltip using data-html="true" and then adding preferred HTML tags and attributes. Checkout example below:
Step 1 - Displaying plain text in tooltip:
<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="name=درود"></i>
Step 2 - Creating the desired HTML to show in the tooltip:
<p dir='rtl'><strong>name<strong>=درود</p>
Step 3 - Displaying text with direction and bold style:
<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="<p dir='ltr'><strong>name<strong>=درود</p>"></i>
- There are also other possible solutions such as editing the CSS class of popover or tooltip, such as this link.

How to change html inside a span

I want to change the content of a span in my form
HTML:
<form action="javascript:submit()" id="form" class="panel_frame">
<label>Origin:</label>
<div class="input-group" id="input-group">
<input type="text" id="origin" name="origin" class="form-control">
<span class="input-group-btn">
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
</span>
</div>
What I want change is che content of <span class="input-group-btn"> with
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
So what change is: the icon pushpin to remove and the action useCurrentPosition to clearPosition.
I' using jquery and despite I've read other answer about similar question on Stack like: How can I change the text inside my <span> with jQuery? and how to set a value for a span using JQuery I haven't solved the issue.
I tried:
$("#input-group span").html('
<button id="btn-default" class="btn btn-default" type="button" onclick="br_bus.useCurrentPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
');
,giving an id to the span and also modify the full div, but none solved my problem.
What am I missing?

Here's a way to overcome the problem of changing the onclick attribute, which is bad practice, without storing a Global var, and using jQuery delegation (learn to use it, it's really good):
$(document).on('click','.btn', positionChange); // Give that button an id on his own and replace '.btn' with '#newId'
// Not using an anonymous function makes it easire to Debug
function positionChange(){
var $btn = $(this), // Caching jQuery elements is good practice
$span = $btn.find('span'), // Just caching
pushpinApplied = $span.hasClass('glyphicon-pushpin'); // Check which icon is applied
( pushpinApplied ) ? useCurrentPosition() : clearPosition();
$span.toggleClass( 'glyphicon-pushpin glyphicon-remove' );
}

Rather than changing the function called in the onclick attribute I suggest having a flag in one function to define the logic it should follow.
For example:
function positionChange(this){
var $this = $(this);
if(!$this.data("currentpositionused")){
//useCurrentPosition() code here
$this.data("currentpositionused", true);
}
else {
//clearPosition() code here
$this.data("currentpositionused", false);
}
Then change your HTML to:
<button class="btn btn-default" type="button" onclick="positionChange(this)">

If you want to change only the onclick attribute of the button inside the particular span you can use the following in your script.,
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
});
EDIT
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
$("span.input-group-btn button span").attr("class","Your_class");
});
And also learn about how to change/add/remove attribute values....

Try this:
$("span.input-group-btn").html('<button class="btn btn-default" type="button" onclick="clearPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>');

Is it like This ?
how to change onclick event with jquery?
$("#id").attr("onclick","new_function_name()");
jquery change class name
$("#td_id").attr('class', 'newClass');
If you want to add a class, use .addclass() instead, like this:
$("#td_id").addClass('newClass');

Javascript toggle hide and show buttons in a loop Laravel 5

I am writing a Laravel 5 project with a comment section code below
#foreach($Comment as $Comment)
<div id="comment-{!! $Comment->comments_id !!}" class="comment-wrapper">
<div class="btn btn-lg btn-info btn-xs" class="show">Show</div>
<div class="btn btn-lg btn-success btn-xs" class="hide">Hide</div>
<div class="btn btn-lg btn-warning btn-xs" class="toggle">Toggle</div>
<div class="watch" class="jumbotron alert-info">
<ul class="list-group">
<li class="list-group-item list-group-item-success">{!! $Comment->author !!}</li>
<li class="list-group-item"> {!! $Comment->text !!}</li>
</ul>
#if ($Comment->author == Auth::user()->name)
<p>Delete</p>
#endif
<h6><small>CREATED ON: {!! $Comment->created_at !!}</small></h6>
</div>
</div>
#endforeach
and I have a javascript file which looks like this
$(document).ready(function () {
$('.show').click(function () {
$(this).closest('.comment-parent').find('.watch').show('slow');
});
$('.hide').click(function () {
$(this).closest('.comment-parent').find('.watch').hide('slow');
});
$('.toggle').click(function () {
$(this).closest('.comment-parent').find('.watch').toggle('slow');
});
});
The trouble is the toggle/hide javascript function only works on one set of buttons and hides all of the comments. I want to have the set of buttons that work for each comment individually. I've tried to increment the watch class and buttons div id by adding 1 and incrementing it for each comment but can't get it to work. Any help would be appreciated thanks.

You may try something like this:
$('#show').click(function () {
$(this).next('.watch').show('slow');
});
Try same approach for other methods, so only the next first div with class of watch will be acted and also, you could have wrapped each set in a single parent container using a unique id attribute in addition to a class, for better grouping. For example:
#foreach($Comment as $Comment)
<div id="comment-{{$comment->id}}" class="comment-wrapper">
<div class="btn btn-lg btn-info btn-xs show">Show</div>
<!-- More... -->
<div class="watch" class="jumbotron alert-info">
<!-- More... -->
</div>
</div>
#endforeach
This way, you could have done the jQuery slecting more specifically, for example:
$('#show').click(function () {
$(this).closest('.comment-parent').find('.watch').show('slow');
});
Update (Thanks to haakym for pointing me that): Also, an id must be unique so instead of using id='show' use it as a class and then use:
$('.show').click(function () {
$(this).closest('.comment-parent').find('.watch').show('slow');
});

jQuery selector with this reference

This is my HTML:
<div class="btn-group btn-group-justified">
<a id="option1" data-option="1" class="btn btn-default" href="#">3</a>
<a id="option2" data-option="2" class="btn btn-default" href="#">6</a>
<a id="option3" data-option="3" class="btn btn-default" href="#">9</a>
<a id="option4" data-option="4" class="btn btn-default" href="#">12</a>
<a id="option5" data-option="5" class="btn btn-default" href="#">15</a>
</div>
<p id="pp"></p>
And my jQuery:
$("[id^='option']").click(function () {
$("#pp").html(this.attr("data-option"));
});
The codes are simplified to point the problem easier.
What I want to do is getting data-option attribute value of clicked a element to the p element with id="pp".
Something is wrong with this reference I guess.
I do not want to write the same code 5 times, so I tried to use starts with operator I think this reference refers to something else.

inside the handler this refers to the dom element, it does not have .attr() method so you need to get the jQuery wrapper reference for that element using $(this).attr('data-option')
$("[id^='option']").click(function () {
$("#pp").html($(this).attr("data-option"));//since the attribute is `data-option` $(this).data("option") also will work
});

You can use the native JavaScript method getAttribute():
$("[id^='option']").click(function () {
$("#pp").html(this.getAttribute("data"));
});
However now that you made it into actual data attribute, simply use such code instead:
$("[id^='option']").click(function () {
var oClickedItem = $(this);
$("#pp").html(oClickedItem.data("option"));
});

Try:
$(document).ready(function(){
$("[id^='option']").click(function(){
$("#pp").html($(this).attr("data"));
});
});
DEMO FIDDLE