How to use inline JavaScript in HTML?

Question

Support that I have this hidden field:

<input type='hidden' id='handler' name='handler' value='5534882394' />

And imagine that I fetch an HTML fragment from server via jQuery AJAX.

<div id='result'>
    <span></span>
</div>

However, instead of writing something like this:

$(function(){
   $('#result span').text($('#handler').val());
});

I'd like to use something like:

<div id='result'>
    <span>javascript:$('#handler').val();</span>
</div>

However, I don't get the intended result. Can I use this approach with JavaScript?

Update: Everybody please, I know about $(document).ready();. So, don't provide better ways. I just wanted to know if it's possible to have inline JavaScript, or not, and if yeah, how?

If you're using Jquery, please don't use inline. You have better ways. — Nishant
– Nishant, Commented Aug 13, 2011 at 13:10
Why do you want to do it that way? What purpose does it serve? — FishBasketGordo
– FishBasketGordo, Commented Aug 13, 2011 at 13:11

Guffa · Accepted Answer · 2011-08-13 13:12:09Z

14

No, you can't use that approach with Javascript. There is no such thing as inline Javascript.

What you see in a link like <a href="javascript:alert(1)"> is the javascript: pseudo-protocol, similar in use to the http: protocol. When you point the browser to such an URL, the browser runs the script.

If you want to run a script in the page, you need a script tag.

answered Aug 13, 2011 at 13:12

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

1 Comment

Saeed Neamati Over a year ago

Great answer @Guffa, you really deserve your high score buddy. :)

ipr101 · Accepted Answer · 2011-08-13 13:20:20Z

6

You could do -

<input type="text" id="handler" value="yes"/>
<div id='result'>
    <span>
       <script>document.write($('#handler').val());</script>
    </span>
</div>

and the page would run the Javascript when it hit the script tag. You'd have to make sure that '#handler' element was already loaded though or the script would fail.

In general it would be better to keep script tags such as this away from your mark-up.

Working demo - http://jsfiddle.net/ipr101/h6zXs/

edited Aug 13, 2011 at 13:20

answered Aug 13, 2011 at 13:07

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

2 Comments

Matt Ball Over a year ago

That doesn't do what the OP wants.

Šime Vidas Over a year ago

That statement returns a string value, but that doesn't mean that that string will be put inside the SPAN element. SCRIPT elements are not replaced with the return value of their statements.

Philipp Kyeck · Accepted Answer · 2024-03-11 15:38:01Z

6

Although the <script> tag works and would let you do what you are trying to do, I would really suggest rethinking your design there. This is not directly what you would call "unobtrusive Javascript".

Why do you prefer to mix HTML and JS? If it's for curiosity - OK, but if this is intended to turn into production code then you might want to separate the two as much as you can. You will be rewarded with a much better maintainability in the end.

edited Mar 11, 2024 at 15:38

Philipp Kyeck

18.9k19 gold badges90 silver badges126 bronze badges

answered Aug 13, 2011 at 13:11

emboss

39.7k7 gold badges103 silver badges109 bronze badges

Comments

Matt Ball · Accepted Answer · 2011-08-13 13:05:45Z

3

Have you forgotten about the <script> tag?

<div id="result"></div>
<script>$('#result').text($('#handler').val();</script>

answered Aug 13, 2011 at 13:05

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

3 Comments

Saeed Neamati Over a year ago

thanks, but I said inline JavaScript. A JavaScript you use in href of an a element: <a href='javascript:void(0);'></a>. This doesn't require <script> tag.

Baz1nga Over a year ago

so what do you want to achieve?

Matt Ball Over a year ago

Script tags are inline JavaScript. Maybe you're looking for something more like api.jquery.com/jQuery.tmpl.

Michael Lorton · Accepted Answer · 2011-08-13 14:27:06Z

2

A few years back, I had that exact problem: I was using AJAX to retrieve HTML and that HTML had embedded Javascript. I was never able to find a better solution than parsing the HTML manually to dig out the Javascript tags and calling eval on their contents. Hackish and unreliable, but it was the best I could find.

answered Aug 13, 2011 at 14:27

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

Comments

Arbel Groshaus · Accepted Answer · 2024-10-18 17:44:58Z

-1

This answer is for educational purposes only. Don't actually do this.

This code will do the trick:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <img src='invalid' onerror="$(this).replaceWith($('<span>').text($('#handler').val()))"/>
</div>

In ES6:

<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <img src='invalid' onerror="
        let newElem = document.createElement('span');
        newElem.textContent = document.getElementById('handler').value;
        this.replaceWith(newElem);
    "/>
</div>

The way this works is that as soon as the img element is loaded, the browser tries to fetch src. Since src is an invalid value, onerror is immediately triggered which can do whatever you want — including replacing the entire element.

As previously said, a much more sensible solution is to just use a script tag.

<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <span></span>
    <script>
        document.querySelector('#result > span').textContent = document.getElementById('handler').value;
    </script>
</div>

answered Oct 18, 2024 at 17:44

Arbel Groshaus

3292 silver badges9 bronze badges

3 Comments

GlabbichRulz Over a year ago

Thank you for providing these examples! Note that the third one however does not trigger "onError" only, but on every page load. You might need to change that snippet to only run in the onError handler of the input. Something like

document.getElementById('handler').onerror = ()=>{        document.querySelector('#result > span').textContent = document.getElementById('handler').value;}

Arbel Groshaus Over a year ago

@GlabbichRulz Sorry, I don't understand this comment. How can the <input> element ever trigger an error?

GlabbichRulz Over a year ago

my bad, i was thinking of the onError event of the img, not the input.

Collectives™ on Stack Overflow

How to use inline JavaScript in HTML?

6 Answers 6

1 Comment

2 Comments

Comments

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related