您将如何直接在html中引用javascript函数？

Question

So the idea is this. I have an array in the js file as well as a function that refers to a random element from that array. I want to be able to click a button and the text in the span changes to a random element in the array. I already have a way of doing this. I have a span with an id of "change_equivalently". Then in the javascript file, I have

var Equivalentlys = [
"Equivalently, ",
"Alternatively, ",
"Another way of saying this is that "
];

$('#shuffle').click(function() {
    var length = (Equivalentlys.length + 1);

    var x = Math.floor(Math.random()*length);

function Equivalently(i){
    return Equivalentlys[i];
};

$('#change_equivalently').text(Equivalently(x));

});

My question is that when I write out the html code, I always have to write

<span id = "change_equivalently"> ... </span>

in order to be able to change the words up upon clicking the button.

But I want an easier way. I tried something like

  <var> Equivalently( 1 ) </var> 

to see if I could refer to the javascript function, but it didn't work.

How could I go about approaching this?

Answer 1

First of all, the approach you're currently using is better than what you want--it separates presentation from function and is widely regarded as the best practice.

However, you can (but, as I said, probably shouldn't ) include code to be called when your element is clicked:

<span onclick="doStuff()"> blarg </span>

If you just want to be able to have JavaScript code that turns into HTML (like PHP or similar templating systems), you won't be able to do it with JavaScript.

Ultimately, the best way is just to use a span to mark the content and add a click event in your script, the way you're doing right now. This is the best semantically: in the html, all you say is that that particular word/position is changeable; you specify how it changes in your code.

Answer 2

Do you mean this?

<script type="text/javascript">
  Equivalently(1)
</script>