js How to add href + text onclick

Question

I need to pass (using javascript) text inside span to href

<div class='tableCell'><span>information</span></div>
<div class='tableCell'><span>contact</span></div>
<div class='tableCell'><span>about</span></div>

for example when i click to about link must be example.com/tag/about/

I don't see the `href` in your example. – Pedro Lobito Apr 25 '15 at 15:00 — Pedro Lobito, Apr 25 '15 at 15:00
i know, i need something like this – Vincenzo Piromalli Apr 25 '15 at 15:04 — Vincenzo Piromalli, Apr 25 '15 at 15:04

score 1 · Answer 1 · answered Apr 25 '15 at 15:49

Here is my Answer. I'm using Javascript to manipulate the DOM to add a new element with the href equal to the inner text within the span element.

I hope you find this answer helpful. Thanks.

var spans = document.getElementsByTagName('span')
var baseUrl = 'http://example.com/tag/'
for(var i=0; i<spans.length; i++)
{
    var curElement = spans[i];
    var parent = curElement.parentElement;
    var newAElement = document.createElement('a');
    var path = baseUrl+curElement.innerHTML;
    newAElement.setAttribute('href', path);
    newAElement.appendChild(curElement);
    parent.appendChild(newAElement)
}

DEMO

Interesting idea but if you have the parent element you could shorten things up using `innerHTML`. `innerText` might also be better when getting the span's value — Downgoat, Apr 25 '15 at 16:13

score 0 · Answer 2 · answered Apr 25 '15 at 15:01

0

$(".tableCell span").click(function() {
    var link = $(this).text(), // will provide "about"
        href = "http://example.com/tag/"+link; // append to source url
    window.location.href=href; // navigate to the page
});

You can try the above code

answered Apr 25 '15 at 15:01

mohamedrias

18,326
2
38
47

score 0 · Answer 3 · answered Apr 25 '15 at 15:01

0

You do not have links but span in your html. However, you can get build the href you want and assign it to an existing link:

   $('div.tableCell').click(function(){
        var href = 'example.com/tag/' + $(this).find('span').text();
   })

answered Apr 25 '15 at 15:01

renakre

8,001
5
46
99

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

The simplest way:

$( "span" ).click(function() {
 var link = 'http://yousite.com/tag/'+ $(this).text().replace(/ /, "-")+"/";
 window.location.href= link.toLowerCase();
 });

DEMO

http://codepen.io/tuga/pen/yNyYPM

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 25 '15 at 15:15

Pedro Lobito

94,083
31
258
268

another question.. related to this.. how to replace white space with - in clicked text? for example "about us" must be about-us/ (whit final slash/) – Vincenzo Piromalli Apr 25 '15 at 15:19
@VincenzoPiromalli Added that to my answer :) – Downgoat Apr 25 '15 at 15:21
mmm... i need slash after clicked text example.com/CLICKED/ ...another question..is it possible to change from A to a in clicked text for example About Us must be about-us/ – Vincenzo Piromalli Apr 25 '15 at 15:25
@VincenzoPiromalli My answer addresses all of those – Downgoat Apr 25 '15 at 15:26
Maybe it's good to convert to lower case and to use `encodeURIComponent` too. – insertusernamehere Apr 25 '15 at 15:27
This will also make *every* span on the page a link – Downgoat Apr 25 '15 at 15:30
works everything :) thank you!!! but lower case not, and in wordpress i see 404 error... :( Anyway thanks to all the same !! P.S. how do I give you the correct answer? – Vincenzo Piromalli Apr 25 '15 at 15:30
@vihan1086 that's exactly what the OP wants. – Pedro Lobito Apr 25 '15 at 15:35
1

how can i do? I do not find the option !! help! – Vincenzo Piromalli Apr 25 '15 at 15:49

score 0 · Answer 5 · answered Apr 25 '15 at 15:16

Lets work with pure javascript, I know you want to use jQuery but I am really sure too many people can't do this without looking in to web with pure javascript. So here is a good way.

You can follow it from jsFiddle

var objectList = document.getElementsByClassName("tableCell");

for(var x = 0; x < objectList.length; x++){
    objectList[x].addEventListener('click', function(){
        top.location.href = "example.com/tag/" + this.childNodes[0].innerHTML;
    });
}

Lets work on the code,

var objectList = document.getElementsByClassName("tableCell"); now we have all element with the class tableCell. This is better than $(".tableCell") in too many cases.
Now objectList[x].addEventListener('click', function(){}); using this method we added events to each object.
top.location.href = "example.com/tag/" + this.childNodes[0].innerHTML; with this line if somebody clicks to our element with class: We will change the link to his first child node's text.

I hope it is useful, try to work with pure js if you want to improve your self.

Downgoat · Answer 6 · 2015-04-25T15:34:55.670

-1

Your Method

If you always are going to have the url start with something you can do something like this. The way it is set up is...

prefix + THE SPANS TEXT + suffix

spaces in THE SPANS TEXT will be converted to -

var prefix = 'http://example.com/tag/',
    suffix = '/';

$('span').click(function () {
  window.location.href = prefix + $(this).text().replace(' ', '-').trim().toLowerCase() + suffix;
  //An example is: "http://example.com/tag/about-us/"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='tableCell'><span>Information</span></div>
<div class='tableCell'><span>Contact</span></div>
<div class='tableCell'><span>About</span></div>

You can adjust this easily so if you want it to end in .html instead of /, you can change the suffix. This method will also allow you to make the spans have capitalized words and spaces.

JSBIN

edited Apr 25 '15 at 15:34

answered Apr 25 '15 at 15:02

Downgoat

13,771
5
46
69

i need to pass every different clicked text at the end of the url for example: http://example.com/information/ http://example.com/about/ – Vincenzo Piromalli Apr 25 '15 at 15:13
@VincenzoPiromalli Yes, I fixed and update my answer. It does, `prefix+THE_SPANS_TEXT+suffix` – Downgoat Apr 25 '15 at 15:14
abt i cant edit tablecell div and add text :) i need to pass via js only – Vincenzo Piromalli Apr 25 '15 at 15:15
Please elaborate on why I have gotten down voted. My answer performs just fine – Downgoat Apr 25 '15 at 16:11

js How to add href + text onclick

6 Answers6

DEMO

Your Method

JSBIN