Calling HTML from JavaScript, and JavaScript from HTML

Very trivial, but wanted just to show that using an external JS file rather than in-line, I can

  • set the innerHTML of a div from a JS file (which feels a little bit wrong – the UI can know about the “view model”, but the “view model” shouldn’t know about the JS)
  • call a JS function in an external file from say a button in the HTML

That is shown below.

For a while I struggled with getting the HTML to recognise the JS file, even though in the WebMatrix project that created it, the JS file was/is definitely in the right position. In the end, I just moved the files to my main IIS location, rather than get WebMatrix or Visual Studio to create a dynamic IIS (you know what I mean):


 

htmlx04

 


 

htmlx01


 

 


 

htmlx03

 


 

htmlx021

 


 


<!doctype html>

<html>
<head>
    <title>Some title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">

<div id="output"></div>


        <script src="js/script.js"></script>
        <button type="button" class="btn btn-default" onclick="x()"></button></div>
</body>
</html>
function x() {
    alert("test");
}

output.innerHTML = "testing";
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s