Develop Reference

How to extract the <title> value

JS is not my main skill, hope someone can help. I am trying to make a GTM variable to extract . Problem is that I cant use class="rg-trailer-icon" as a class name because it changes based on the truck type that is viewed (trailer, truck, etc)
Thank you!

You can extract the title. You just have to scramble through.
t = document.querySelector('#scheduleContainer svg title').innerHTML
console.log(t)
<div id="scheduleContainer">
<div>
<div>
<svg>
<title>Hello</title>
<path>
</svg>
</div>
</div>
</div>

in javascript, using document.title should be enough

JavaScript fetching values from div tag

Hi I'm new to JavaScript. I need to fetch value 'KARTHIK' from the following code using document.getElement,
<div class="account-info">
<h3 class="account-header">Welcome back,</h3>
<p>
<strong>KARTHIK</strong><br>
</p>
</div>
Any one help me in this. Thanks in advance.

You can use innerHTML
you just have to give the strong tag an id.
<strong id="ih">KARTHIK</strong>
<script>var innerStrong=document.getElementById("ih").innerHTML;</script>

You can get the element by its tag:
alert(document.getElementsByTagName("strong")[0].innerHTML);
<div class="account-info">
<h3 class="account-header">Welcome back,</h3>
<p>
<strong>KARTHIK</strong><br>
</p>
</div>
However, get elements by the tag name can be unreliable, because there may be more than one <strong> tag. Thus, it would be advisable to assign an id to the element:
alert(document.getElementById("account-name").innerHTML);
<div class="account-info">
<h3 class="account-header">Welcome back,</h3>
<p>
<strong id="account-name">KARTHIK</strong><br>
</p>
</div>

You can use querySelector of document object to get this easily.
document.querySelector("div.account-info strong").innerHTML
Refer this jsbin

javascript on page load check if a span (under <tr>) with a specific class exist, if does not exist remove the entire <tr>

I am trying to create my own greasemonkey script for my favorite directory listing site :)
The thing is not everything it list is beneficial to me, I inspected the website code and as it seems, each entry is under
Now, and as it seems, I am only interested with those which have this format:
<tr class="project-description">
<td colspan="6">
<div class="project-desc-inner">
<div class="project-synopsis">
<p class="trunk8">This is an entry</p>
</div>
<div class="project-verification">
<span class="verfied-badge"> <~~~~~~~~~~ THIS SPAN
<span class="currency-symbol">$</span>
<span class="icon-tick"></span>
Verified
</span>
</div>
<div class="project-actions">
<a href="#">
<button class="btn">LOL</button>
</a>
</div>
</div>
</td>
</tr>
As you can see, the existence of <span class="verfied-badge"> triggers it.
I also wish that the javascript process this after the page loads, because the site populates the table via javascript too.
I know I haven't done in my problem yet, but if somebody can just provide an example that can lead me, that is enough.
Thank you very much!

$(document).ready(function(){
$("tr.project-details").each(function(){
var self = $(this);
if(self.find("span.verfied-badge").length==0)
self.remove();
});
});

Filtered selector that calls .remove only once
Since there're other span elements within TR that are unrelated to the problem it's not possible to write a pure CSS filter selector string (so we could either use .has) to sufficiently filter elements. but instead of removing each table row individually we filter them first and remove them all at once.
$("tr.project-description").filter(function() {
return !$("span.verfied-badge", this).length;
}).remove();

How to change the display property in a css class using js when user clicks a button

I'm building a webapp that I plan on converting to a smartphone app using Phone Gap Build. I've never done this before so may not be describing my problem clearly but here goes.
I started using the jquery mobile sample in Dreamweaver, this has multiple pages in a single html file. What I'd like to do is have a series of English phrases on each page, each English phrase will be followed by the formal Spanish translation and then the informal Spanish translation. At the top of the page the user will have three buttons saying "Formal", "Informal" and "Formal & Informal". The user will always see the English phrases followed by the Formal, Informal or Formal & Informal Spanish depending on which buttons they pressed/ tapped.
The home page can be seen here http://www.pslt.biz/mobileApp/LE4/index3.html then click "Age, Weight & Height" and you'll see that clicking the Formal/ Informal buttons has no effect on the Spanish underneath the first phrase "How old are you".
If it helps here's the Formal button which should set the CSS class ".formal" to Display:Block and the ".informal" class to Display:None
Display Formal
The CSS classes are defined externally as follows:
.formal { display:block;
}
.informal {display:block;
}
And the Spanish phrases are defined in divs as follows:
<div class="formal"> <!-- Start Formal -->
<div style="float:left">
<a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
<img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
</div>
<div style="float:left">
Cuántos años tiene?
</div>
</div> <!-- End Formal -->
<div class="informal"> <!-- Start informal -->
<div style="clear:left">
<div style="float:left">
<a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
<img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
</div>
<div>
Cuántos años tienes?
</div>
</div>
</div> <!-- End informal -->
If anyone could point me in the right direction I'd really appreciate it, I thought it would be simple to do but I must be missing something blindingly obvious.

You can use jQuery:
<a href="#"
onclick="$('.formal').css('display', 'block'); $('.informal').css('display', 'none');">Display Formal</a>
The problem is your divs have classes "formal" and "informal", not ids and you are selecting by ID.
Another option:
Display Formal

Use getElementsByClassName() instead of getElementById().
You have selector by class name, not by id Or replace class="informal" and class="formal" with id="informa1" etc.

The solution from MiFeet worked perfectly. I used
Display Formal
For some reason I was unable to show that as the answer, I received an error when I clicked on the checkbox, I hope this helps someone else.
Tony Babb

JS code:
button.onclick=function(){
element=document.getElementsByClassName("formal")[0];
element.className="informal";
}

if you have class="informal" then replace it with class="informal1" and try this
Display Formal
function change(){
$('#remove').removeClass('informal');
$("#remove").addClass("informal1");
}

I Have A Dialog That Displays But Only One Button Changes the Cursor

I have what is probably an incredibly simple question, but I don't know how to resolve it and any help would certainly be appreciated.
Here's my code;
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);">No</a></p>
</div>
</div>
For a reason unbeknownst to me, the "No" link is not changing the cursor to a hand when hovered over but I haven't a clue how to address this.
I would suspect the problem is arising because the NO link doesn't have a href but being that I'm very novice I don't know how to remedy the situation so I ask that someone could please show me how to resolve this and I thank you in advance.

because you have no href attribute on the link. Add one and the cursor will change.
NITPICk: drop the javascript: it is not needed.

Add href ="#" to make it look like a link and not to navigate to a different page
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);" href ="">No</a></p>
</div>
</div>

The onclick event handler needs to supress the links default behavior to navigate to what's specified in the href attribute.
so you need href="#" also you dont need that javascript:
It should be like this:
<p class="BikeForSaleButtonNo">
No</p>
Here is a link to show the working code:
http://jsfiddle.net/dkU7B/1/
Edit: Forgot to mention another thing you can do is get rid of the onclick entirely and just use the href with javascript like so, but now you will need to use the javascript: just a neat trick.
No

You need an href="#", and I would separate your HTML and JS, it's just cleaner IMO:
<script>
var div = document.getElementById('div2');
function rmv() {
div.parentNode.removeChild(div);
}
</script>
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
No</p>
</div>
</div>