We Keep Coding

Want To Parse Out The Modal # for a Carousel on a Home Page

There is a carousel on a home page and I would like to add an onclick event to it to send the data back to GA. Each part of the carousel is a link. But I want to specify which selection on the carousel they selected. When I hover over each of the carousel links, the end of the URL says
#carousel-modal1, #carousel-modal2, #carousel-modal3, #carousel-modal4, #carousel-modal5.
How do I programmatically get the number of modal that's selected?
I would like to add an onclick event with a function. When I tried, I added the onclick to the rest of the code below. I know how to send the info back to GA but I guess the most important question is how do get that modal #?
HTML:
<div class="carousel-item">
<a
id="modal-111"
href="#carousel-modal"
onclick="myFunction()"
role="button"
data-toggle="modal">
<img class="d-block w-100" alt="" src="/somepic.png" />
</a>
</div>

Your question is kinda all over the place, but it seems like the prevailing idea is that you want to get 111 from the example via the onclick event...
To do that, you can use this, which provides access the element that activated the click. Then you can use some js string magic to get the number, like so:
function myFunction(){
var id = this.id;
var number = id.substring(id.indexOf('-')+1,id.length);
}
As a sidenote, you may want to consider using jQuery, it makes stuff like this way easier:
<div class="carousel-item">
<a
id="modal-111"
href="#carousel-modal"
role="button"
data-toggle="modal">
<img class="d-block w-100" alt="" src="/somepic.png" />
</a>
</div>
<!-- include the jQuery code on your site -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('.carousel-item a').click(function(){
var id = this.id;
var number = id.substring(id.indexOf('-')+1,id.length);
});
});
</script>
In this example, you're attaching a function to all anchor links inside carousel-item tags, so you don't need to add an onclick to each one.
And based on your update in the comments, it seems like you want the number that follows the href attribute. Here's how to do that:
function myFunction(){
var href = this.getAttribute( 'href' );
var number = href.substring( href.indexOf('modal')+1, href.length );
}
Take a look at how this answer changed based on what you asked. What you were really looking for was answers to two small problems:
How to get the value of an attribute.
How to search within that value, or how to search a string.
Both of these questions are easily answered with google.
As you build more advanced things, the SO community is not going to spend time deciphering your question.
Next time, be sure to spend a lot of time simplifying your question to the bare essentials. Make sure it is as easy to understand as possible. Also be sure to create a working example (or as close as you can get) of your code on jsfiddle or codepen.
You should aim to spend at least an hour writing a question. If you take this advice, 99% of the time you will answer your own question before you need to post it here, and that will save you a lot of time. Good luck.

New Line character in title attribute does not work in tooltip

I have an html form where I need to add new line character in to the title attribute of the anchor tag. I found a few solutions online but none of them work in my code.
I tried adding
\n
<br>
not sure what is missing. Is it because of data-toggle that is blocking from breaking the title attribute?
$(document).ready(function () {
$('form').attr('novalidate', true);
$('[data-toggle="tooltip"]').tooltip();
<a class="helptext fa fa-question-circle" data-toggle="tooltip" title="Additional information -
 You can provide further information here to for your
 application to issue a new card.
 Ensure a maximum of 200 characters
 is entered – including spaces."></a>

Setting the title with JavaScript works for me.
document.getElementById('asdf').title = 'line1\nline2';

A popover would be a better solution, but it is possible to achieve this functionality in browser:
$(document).ready(function () {
$('form').attr('novalidate', true);
//$('[data-toggle="tooltip"]').tooltip();
$('.helptext')[0].title = "I like\nlines"
// you can also use $('.helptext').attr("title",decodeURI("I like%0A to%0Ause%0Alines"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="helptext fa fa-question-circle" data-toggle="tooltip" href="#" title="Additional information -
 You can provide further information here to for your
 application to issue a new card.
 Ensure a maximum of 200 characters
 is entered – including spaces.">test</a>

Change data-content in a bootstrap popover

I'm really new to coding, I've searched a bit to try to find an answer and I feel like there's a very simple way to do this, but the answers I find I can't understand.
I have this example which shows the popover.
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>
I want to change the content of data-content in my JavaScript file
I tried this but it doesn't seem to work.
document.getElementById('test').setAtribute('data-content','hello');

As you are using jquery, try setting the value for content as shown below,
$('#test').data('content', 'hello');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>

Javascript can be a dangerous tool... it can and will silently do nothing if what you write is not valid Javascript.
So this line:
document.getElementById('test').setAtribute('data-content','hello');
has a misspelling in 'SetAttribute', which tries to call a function that doesn't actually exist (since it's misspelled), and so it does nothing at all.
First step when debugging: re-read your code carefully!

Ghost.py - click specific button

I'm trying to click specific button but with no result yet.
Using Python 3.4.2 and Ghost.py.
<a class="button" title="" ref="1" id="details" href="javascript:void(0);">
</a>
This code is under many div's and li's.
The simplest answer is welcomed!

You can evaluate a line of Javascript with Ghost.py and use the click method on the appropriate DOM element you get with getElementById:
page, resources = ghost.evaluate("document.getElementById('details').click();", expect_loading=True)
UPDATE
To get the link by class use the following line
ghost.evaluate("document.getElementsByClassName('button')[0].click();", expect_loading=True)
There is another version you can use to select and click the first link with an ref="1" attribute on your page:
ghost.evaluate("document.querySelector('a[ref="1"]').click();", expect_loading=True)

jQuery script for image change, not working

I want to change src of in img, I coded as below, but it's not working, what's wrong?
<img id='logo_image'/>
<span onclick='$(logo_image).attr("src", "images/logo_orange.png");'>click me</span>

It might be the problem with your selector.
If it is id use $('#logo_image')
If it is class use $('.logo_image')

First up you're trying to use a variable logo_image when you should be using a string starting with # to indicate you want to select by id:
onclick='$("#logo_image").attr("src", "images/logo_orange.png");'
Secondly, it would be better not to use an inline onclick attribute if you can help it:
<img id='logo_image'/>
<span>click me</span>
<script>
$("span").click(function() {
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
...where ideally the span element would have some id or something to select it by.
Thirdly, don't make span elements clickable in the first place unless you don't care about making your page accessible to people who can't (or who choose not to) use a mouse or other pointing device. Better to use an anchor (which you can style as you see fit) so that the user can tab to it and activate it with the keyboard:
<img id='logo_image'/>
click me
<script>
$("a").click(function(e) {
e.preventDefault();
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>

The problem with your code is you aren't probably setting the object to logo_image variable.
I suggest changing it to:
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>click me</span>
logo-_image should be the id of that image.

Since you want refer to the name of the id, you have to wrap the logo_image in quotes, otherwise Javascript will treat it as variable.
$('#logo_image')

You have to use something like this:
<img id="logo_image" src="" />
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
if you have an img with a id named logo_image
if your img has the css class logo_image you have to write:
<img class="logo_image" src="" />
<span onclick='$(".logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>

Make sure u use the right quotes in the javascript part.
Also use $('#logo_image') selector to get the image by id.
I made a jsfiddle for you to demonstrate:
http://jsfiddle.net/9Ltfa/
<span onclick="$('#logo_image').attr('src', 'images/logo_orange.png');">click me</span>

As you have specified the image as an id, you will need to reference the image via the following code:
$('#logo_image')