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.

Issue with data-th-id

I have a button that leads to a modal view. I try to intercept the value with JS.
It works like this:
<button type="button" class="btn btn-outline-primary btn-sm"
data-toggle="modal" data-target="#myModal" data-person-id="something">
Edit
</button>
JaveScript:
var bookId = $(e.relatedTarget).data('person-id');
It doesn't work like this:
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal" data-th-id="${person.getId()}">
Edit
</button>
JS:
var bookId = $(e.relatedTarget).data('id');
or
var bookId = $(e.relatedTarget).data('th-id');
var is undefined it says.
Since I use Thymeleaf I need to catch the value with data-th-id.
Any idea how to get the value
Complete JS
$('#myModal').on('shown.bs.modal', function (e) {
$('#myInput').focus();
var bookId = $(e.relatedTarget).data('id');
alert(e.relatedTarget.nodeName);
alert(bookId);
});

data-person-id="something" is a data attribute, and is accessed with $('...').data('person-id').
data-th-id="${person.getId()}" isn't a data attribute. It's just a different way of saying th:id, which outputs the id="..." attribute of a tag. You can't use jQuery's .data() method on non-data attributes, instead you use attr() -- $(e.relatedTarget).attr('id');

jQuery replace HTML in string

I want to replace following HTML string:
</p><span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p><br></p>
with:
</p><button onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">YYY</button><p><br></p>
using jQuery. I have tried .replace() function, but its not working for some strange reason.

try give span an ID and
You can do:
$("#yourid").text("YYY");
or
$("#yourID").html("testing <b>YYY</b>");

Here you go with a solution https://jsfiddle.net/bqfv5fge/1/
var span = $('span:contains("XXX")');
span.after('<button>YYY</button>');
$(span[0].attributes).each(function() {
$('button:contains("YYY")').prop(this.nodeName, this.nodeValue);
});
span.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p>
test paragraph
</p>
Use jQuery contains to get the target element.
Reference Document: https://api.jquery.com/contains-selector/
First get the reference of span element, then add button next to span using jQuery after.
Then attach all the attribute to the button and then remove span.

Try this, but better to add an ID for selector.
$(document).ready(function(){
$('span').click(function(){
$(this).text('YYY') or $(this).html('YYY');
})
})

var attr ='';
$("span").each(function(){
$.each(this.attributes,function(){
attr += this.name+'="'+this.value+'"';
});
});
$("span").replaceWith('<button '+attr+'>'+$('span').text()+'</button>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span onclick="alert(event)" class="btn btn-sm btn-success xyz" contenteditable="false">XXX</span>
https://jsfiddle.net/s0bv09gm/.

If you just want to replace "span" with "button" tag:
$(document).ready(function(){
var x = '</p><span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p><br></p>';
alert(x.replace(/span/g,"button"));
});
https://jsfiddle.net/L26fvfvL/
If you want to replace XXX with YYY:
HTML Code:
<span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span>
JQuery Code:
$(document).ready(function(){
var x = $("span");
x.html(x.html().replace("XXX","YYY"));
})
https://jsfiddle.net/f7qsa6kw/
If you want to do both the things, apply the second step and then first step.

Jquery updating link with href value

I have the following code
jQuery(document).ready(function($)
{
$("#deleteorderb").click(function()
{
$("#deleteorder").attr('href','/deleteorder.php?id=' + $('#deleteorderb').val());
})
});
<a onclick="jQuery('#modal-2').modal('show');" id="deleteorderb" name="deleteorderb"
value="<?php echo $r['id']; ?>" class="btn btn-danger btn-sm btn-icon icon-left">
Cancel
</a>
When I click the link, it opens a popup modal, which has a but of text saying are you sure you want to delete, and then there's a link, herf, I want to update that herf to equal the the other href's value which will be a database query to get the id. the ink updates with the above but not the id. I have checked the source code and the a hrefs value IS set.

You want to grab element attribute value, so instead of
$('#deleteorderb').val()
try
$('#deleteorderb').attr('value')

Try something like this, *note the use of .attr("value") not .val():
<a onclick="dialog();" id="deleteorderb" name="deleteorderb" value="<?php echo $r['id']; ?>" class="btn btn-danger btn-sm btn-icon icon-left"> Cancel</a>
<script>
$(document).ready(function() {
$("#deleteorderb").click(function() {
var a = $('#deleteorderb').attr("value");
var link = "/deleteorder.php?id=" + a;
$("#deleteorder").attr("href", link);
});
function dialog() {
$('#modal-2').modal('show');
};
});
</script>

The value attribute is normally used on form fields. So in your case it would make sense to use a data attribute as follows:
<a id="deleteorderb" name="deleteorderb" data-value="<?php echo $r['id']; ?>" .....
And in your JavaScript you could access it like so:
$('#deleteorderb').data('value');
BONUS
I would not recommend using inline JS. Instead just use jQuery to setup a click event listener in your DM ready callback:
$('#deleteorderb').on('click', function( e ) {
e.preventDefault();
$('#modal-2').modal('show');
});
Updated html:
<a
id="deleteorderb"
name="deleteorderb"
data-value="<?php echo $r['id']; ?>"
class="btn btn-danger btn-sm btn-icon icon-left">
Cancel
</a>

Javascript/JQuery to create a div -Simple Way

I have this code in a div:
<div class="user_event my_background">
<%= image_tag("events_pics/boom.png", :class=> 'event_pic_small') %>
<h6 class="event_info">Event_1: Frame: 974</h6>
<a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>
</div>
and I want this to be appended into an other element each time I click on a button. Anyway the main question is, Is there an easy way to create the above div using javascript? for example a function that takes that as an argument and creates it? Thanks

This simple Jquery function will set the html inside the element selected to whatever you want.
$("SomeElement").html("<div class='user_event my_background'>...</div>")
Just specify the element you want to add the html to and the rest of you html as the argument and you are good to go. Hope that helps.

If you can use jQuery then
$(".user_event").clone().appendTo("#MyTargetElement");
Edit:
Instead of creating a the div again and again, I'd recommend that you keep it hidden in some element and get it using that hidden element's id and append it to your target element.
<div id="myhiddenelement" style="display:none;">
<div class="user_event my_background">
<%= image_tag("events_pics/boom.png", :class=> 'event_pic_small') %>
<h6 class="event_info">Event_1: Frame: 974</h6>
<a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>
</div>
</div>
jQuery
("#MyTargetElement").append($("#myhiddenelement").html());

Use this script:
$("body").prepend('<div>').addClass("user_event").addClass("my_background");
function addElement()
{
$(".user_event.my_background").append('<h6 class="event_info">Event_1: Frame: 974</h6>');
$(".user_event.my_background").append('<a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>');
}
Hope this helps! :)

function append_to_what(id)//id can be any css3 selector
{var div=document.createElement('div');
div.innerHTML='<%= image_tag("events_pics/boom.png", :class=> "event_pic_small") %><h6 class="event_info">Event_1: Frame: 974</h6><a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>';
'
div.className='user_event my_background';
document.querySelector(id).appendChild(div);
}

You may want to check Jquery where you can access a div using class name.