Javascript problem when returning function?

Question

I have a function like this:

function ban_rot(){
var bnr = new Array();
bnr[0] = "/Graphics/adv/businesscrown.gif";
bnr[1] = "/Graphics/adv/webbdesigna.jpg";
num = bnr.length - 1;
i = Math.round(Math.random(bnr) * num);
return '<img src=\"' + i + '\" alt=\"\" border=\"1px\" style=\"border-color:#000;\">';
}

I then have a html code:

<td align="center"><a href="http://www.domain.com" class="links4">
  <script type="text/javascript">return ban_rot();</script>
  </a>
</td>

The above doesn't work, ie nothing shows up. empty.

Any ideas?

Thanks

score 5 · Accepted Answer · answered Oct 11 '10 at 16:53

return doesn't work like echo in PHP. If you want to output into your HTML, you need to create an element and then update it (for instance, by editing it's innerHTML attribute).

<td align="center"><a href="http://www.businesscrown.com" class="links4">
  <div id="banner"></div>
  <script type="text/javascript">
    document.getElementById('banner').innerHTML = ban_rot();
  </script>
  </a>
</td>

score 2 · Answer 2 · answered Oct 11 '10 at 16:53

2

Since the ban_rot() function returns a String and you want to display the String you may need to do this:

    <script type="text/javascript">document.write( ban_rot());</script>

answered Oct 11 '10 at 16:53

Vincent Ramdhanie

98,815
22
134
183

1

Calling `document.write()` is called after the page has finished loading is problematic. http://stackoverflow.com/questions/802854 – Matt Ball Oct 11 '10 at 16:56
Hmm. this works, but in the "src" attribute I get a number instead of the src to the file. Any idea? – Oct 11 '10 at 16:56
@Camran: yes. You're building the string like this: `return ' – Matt Ball Oct 11 '10 at 16:58
@Camran: do this instead: `return ' – Matt Ball Oct 11 '10 at 16:59

Matt Ball · Answer 3 · 2010-10-11T17:00:18.933

I think you're conflating the server-side templating paradigm with client-side JavaScript. Even if you return a string from a JavaScript function, as you have done, it doesn't magically insert that string into the DOM and remove the <script> tags.

Instead, you need to use DOM API methods to turn your function-returned string into an actual HTML element, like this: document.getElementById('some_element_id').innerHTML = ban_rot();

score 0 · Answer 4 · answered Oct 11 '10 at 16:53

0

Just returning the HTML string won't print it. You need to do something like document.write().

answered Oct 11 '10 at 16:53

Armand A

41
1
3

score 0 · Answer 5 · answered Oct 11 '10 at 16:53

0

"return" is used to return a value from a function. You can not use it to put code in a page. You can use document.write(...) but I would highly recommend you learn jQuery. It makes modifying the html much easier.

answered Oct 11 '10 at 16:53

Plaudit Design

1,148
8
16

lincolnk · Answer 6 · 2010-10-11T16:59:32.070

you can't just return in the middle of a document.

<td align="center">
  <a href="http://www.domain.com" class="links4" id='myLink'></a> 
  <script type="text/javascript">
     document.getElementById('myLink').innerHTML = ban_rot();
  </script>
</td>

note that you have to give your link an id so that it may be referenced (or pick another wya to find it).

the preferred way to do all this is to construct new elements with the DOM methods.

function ban_rot() {
    var bnr = new Array();
    bnr[0] = "/Graphics/adv/businesscrown.gif";
    bnr[1] = "/Graphics/adv/webbdesigna.jpg";
    num = bnr.length - 1;
    i = Math.round(Math.random(bnr) * num);

    var img = document.createElement('img');
    img.src = i.toString();
    img.style.border = '1px solid #000';

    var myLink = document.getElementById('myLink');
    myLink.appendChild(img);
}

then you don't need to return anything- the method will add the image to the link.

<td align="center">
  <a href="http://www.domain.com" class="links4" id='myLink'></a> 
  <script type="text/javascript">ban_rot();</script> 
</td>

Javascript problem when returning function?

6 Answers6