Question

I’m trying to create this webpage for homework where I have to state which function I’m testing and give the result after. For example:

 "Testing function1" --> should be a heading (h1....h6)
 result 
 "Testing function2"
 result1
 ...

According to the homework rules, i have to put my javascript code in head and call the functions in body.

I tried thinking of a way where I don’t need to re-type

   <script type="text/javascript">  </script> 

a few times. Any ideas?

Answer 1

There’s nothing wrong with having <script.../script> a few times, if that’s the order it appears in the page. You don’t need to group all your scripts into one <script> tag for neatness or anything.

It’s pretty common to see a block of HTML then a <script> after it which does something relating to that HTML (bad practice yes, but not something to worry about just yet when you’re learning).

Unless there’s something specifically saying you can’t use more than one inline script, I’d just say make it easy for yourself.

You could use some document.writes if you really wanted to, or something along those lines (.innerHTML is another option) but that’ll just generate messier code. Keep your HTML as HTML, and where possible, don’t write Javascript that creates HTML.

---

All in one:

<script type="text/javascript">
  document.write('<h1>Testing f1()</h1><p>' + function1() + '</p><h1>Testing f2()</h1><p>' + function2() + '</p>');
</script>

Yes it’s one line, but damn, how annoying would that be to debug if it was something a little more complex?

---

My recommendation:

<h1>Testing f1()</h1>
<p>
    <script type="text/javascript">
        function1();
    </script>
</p>

<h1>Testing f2()</h1>
<p>
    <script type="text/javascript">
        function2();
    </script>
</p>

Yes it’s more lines, but it’s much easier to see what it’s doing at a glance – you don’t need to actually read it, it’s very very obvious.