dynamic javascript using jquery

Question

<div id="text">some text</div>

<img src="#" onclick="$.function('http://url.com?q=some+text')"/>

I want the q= to be dynamic using the text in the previous paragraph. I can get the text into a variable

var str = $("#text").text();

but am struggling to output this dynamically.

EDIT:

It's much simpler than I thought, figured out the solution from Darin's answer:

  <div id="text"><p>Testing text to speech</p></div>
  <div id="textlink"></div>
  <img src="#" onclick="$.sound.play('http://translate.google.com/translate_tts?q='+ str)" />
<script>
var str = $("#text").text(); 
</script>

Just needed to know how to append a variable. Thanks

Its funny there are 4 answers already but it can only be assumed that we know what OP wants as his question is not clear enough. Are we really helping him by spamming him with our assumptions? Or should we possibly wait for him to clarify his question and better explain what he is trying to do? — John Hartsock
– John Hartsock, Commented Sep 19, 2011 at 21:12
I'm creating a text to speech application for disabled students where a request (i.e. the contents of div#text) is sent to google translate using onclick using this method stackoverflow.com/questions/3853254/… - Thanks for all the responses so far! — Mike Thrussell
– Mike Thrussell, Commented Sep 19, 2011 at 21:17

Darin Dimitrov · Accepted Answer · 2011-09-19 21:08:31Z

2

Lemme shoot in the dark:

<img src="#" onclick="window.location.href = 'http://url.com?q=' + encodeURIComponent($('#text').text());" />

or if you want to assign this src dynamically:

<img src="#" id="foo"/>

and then:

$(function() {
    $('#foo').click(function() {
        window.location.href = 'http://url.com?q=' + encodeURIComponent($("#text").text());
    });
});

answered Sep 19, 2011 at 21:08

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naftali · Accepted Answer · 2011-09-19 21:13:01Z

2

Start of what I think you want to do:

$('img').click(function(){
    var str = $("#text").text();
    alert('http://url.com?q=' + str);
});

Or maayyyyybe:

$('img').click(function(){
    var str = $("#text").text();
    window.location = 'http://url.com?q=' + encodeURIComponent(str);
});

Or even:

$('img').click(function(){
    var str = $("#text").text();
    this.src = 'http://url.com?q=' + encodeURIComponent(str);
});

Fiddle: http://jsfiddle.net/maniator/UrDRX/
(works in HTML5 browsers, edit the color code)

And on and on....

edited Sep 19, 2011 at 21:13

answered Sep 19, 2011 at 21:07

Naftali

147k41 gold badges247 silver badges304 bronze badges

Comments

Kris Krause · Accepted Answer · 2011-09-19 21:09:49Z

1

Separation of concerns. In this case you want to keep behavior (javascript) separate from the content (html) and style (css). - http://en.wikipedia.org/wiki/Separation_of_concerns

So... onclick="x();" is not preferred. Rather:

$(document).ready(function(
 $("#buttonId").click(function() { 
    var val = $("#text").text();
    var url = 'http://url.com?q=' + encodeURIComponent(val);

    alert(url); // or window.location or whatever you want to accomplish
 });
));

answered Sep 19, 2011 at 21:09

Kris Krause

7,3162 gold badges25 silver badges26 bronze badges

Comments

David Thomas · Accepted Answer · 2011-09-19 21:08:50Z

0

Perhaps, if you want to use the entire text-content of the paragraph:

var str = encodeURIComponent($('#text').text());

$('#linkId').attr('href','http://url.com?q=' + str);

JS Fiddle demo.

answered Sep 19, 2011 at 21:08

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Collectives™ on Stack Overflow

dynamic javascript using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related