Converting inline Javascript to an onclick event

Question

I'll be blunt. Most of my skill is in pure HTML and CSS. I'm trying more and more to expand into JavaScript and JQuery and have some experience, enough to understand many simple tutorials and implement them with my own changes, but not enough to do much on my own without a cheatsheet or a similar example to work from. Anyway:

I wanted to try THIS tutorial I found to use Ajax to replace the contents of a div, but the implementation requires poor markup (inline JS). He doesn't suggest a way to utilize an onclick event instead, and I would much prefer that to inline JS.

This is "Ajax Engine" he provides, which I choose to import/link because I feel it's silly to dump all that in the HTML:

<script type="text/javascript">
// Version 1.1 of May 16, 2013
function RequestContent(url,id) {
var http;
if (window.XMLHttpRequest) {
   try { http = new XMLHttpRequest(); }
   catch(e) {}
   } 
else if (window.ActiveXObject) {
   try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch(e) {
      try { http = new ActiveXObject("Microsoft.XMLHTTP"); } 
      catch(e) {}
      }
   }
if(! http) {
   alert('\n\nSorry, unable to open a connection to the server.');
   return false;
   }
http.onreadystatechange = function() { PublishContent(http,id); };
http.open('GET',url,true);
http.send('');
}

function PublishContent(content,id) {
try {
   if (content.readyState == 4) {
      if(content.status == 200) { document.getElementById(id).innerHTML=content.responseText; }
      else { alert('\n\nContent request error, status code:\n'+content.status+' '+content.statusText); }
      }
   }
catch(error) { alert('Error: '+error.name+' -- '+error.message); }
}
</script>

In order to use the function RequestContent, he only offers the option to plop inline JS like so:

<ul>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent1.html','fill-me3')">
Click here</a> to fill the div below with the Master Form .PHP logo.
</li>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent2.html','fill-me3')">
Click here</a> to fill the div below with the Master Form V4 logo.
</li>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent3.html','fill-me3')">
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>

I understand how the inline JS works, I'm just not sure how to write it in a way to allow for an onclick event.

How would I go about converting the inline JS? I really appreciate the help.

Seth Flowers · Accepted Answer · 2016-01-15 20:25:53Z

1

Just change href to onclick, and get rid of javascript:.

<ul>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent1.html','fill-me3')">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent2.html','fill-me3')">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent3.html','fill-me3')">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

answered Jan 15, 2016 at 20:25

Seth Flowers

9,2302 gold badges34 silver badges46 bronze badges

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

2 Comments

zfrisch Over a year ago

This is good for a quick fix. Keep in mind that it does deviate from unobtrusive Javascript. Personally I avoid event style attributes as much as possible. en.wikipedia.org/wiki/Unobtrusive_JavaScript

joe_young Over a year ago

This is still inline

xkcd149 · Accepted Answer · 2016-01-15 20:55:03Z

0

Using a data attribute to hold the value would allow you to add more links without having to write more javascript.

HTML

<ul>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent1">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent2">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent3">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

Javascript

$('.someLink').on('click', function(e) {
  var content = $(e.currentTarget).data('request-content');
  RequestContent('/library/' + content + '.html', 'fill-me3');
});

answered Jan 15, 2016 at 20:55

xkcd149

8411 gold badge11 silver badges17 bronze badges

2 Comments

xkcd149 Over a year ago

Inline with what @Omar Yafer metioned

Michi Bee Over a year ago

This is exactly what I was looking for - thank you so much!

joe_young · Accepted Answer · 2016-01-15 20:47:13Z

0

To use the onclick event in external javascript, your elements will need to have IDs:

<ul>
  <li>
    <a id="one">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a id="two">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a id="three">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

And in your external javascript you will use Document.getElementById() and the .onclick property:

document.getElementById("one").onclick = function() {
    RequestContent('/library/ajaxcontent1.html','fill-me3');
}
document.getElementById("two").onclick = function() {
    RequestContent('/library/ajaxcontent2.html','fill-me3');
}
document.getElementById("three").onclick = function() {
    RequestContent('/library/ajaxcontent3.html','fill-me3');
}

edited Jan 15, 2016 at 20:47

answered Jan 15, 2016 at 20:43

joe_young

4,1252 gold badges30 silver badges38 bronze badges

1 Comment

Omar Yafer Over a year ago

Actually since it is a link it would be better to add the '/library/ajaxcontent?.html' as an href or a data- attribute, get the href via jquery and block the event. The code would be a bit more complicated but it would allow you to add as many links as needed.

DinoMyte · Accepted Answer · 2016-01-15 20:48:35Z

Here's a more generic and simple way to call the function using jquery. You should add the link and other attribute as part of the anchor tag.

<ul>
<li>
<a href="#" link='/library/ajaxcontent1.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
<li>
<a href="#" link='/library/ajaxcontent2.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
<li>
<a href="#" link='/library/ajaxcontent3.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>
<script>
$(document).ready(function(){
$('a').click(function()
{
  RequestContent($(this).attr("link"),$(this).attr("class"));
});
});

function RequestContent(url,cls)
{
  alert(url);
  alert(cls);
}
</script>

Example : https://jsfiddle.net/DinoMyte/Lkb0s60n/1/

Katana314 · Accepted Answer · 2016-01-15 20:50:35Z

0

Only use an <a> element when you intend to navigate, either this frame or another one, to a destination page. Use any other element for javascript events, and add CSS to make it look clickable if you like. (Note that there are ways to shorten the below script using JQuery or other JS toolkits)

function NavigateTo(dest) {
  // ...
}

var navTos = document.querySelectorAll('.navTo');
for (var i = 0; i < navTos.length; i++) {
  navTos[i].addEventListener('click', function(evt) {
    NavigateTo(evt.target.dataset.navPage);
  });
}

.link {
  color: blue;
  cursor: pointer;
}
.link:hover {
  text-decoration: underline;
}

<span class="link navTo" data-nav-page="place.htm">Go here</span>

answered Jan 15, 2016 at 20:50

Katana314

8,6052 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

Converting inline Javascript to an onclick event

5 Answers 5

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related