Console.log vs. innerHTML

JavaScript
1

I have this code from an example which outputs to console.log:

<script>
function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as data URL");
            console.log(evt.target.result);
        };
        reader.readAsDataURL(file);
    }
</script>

However, I want to output it to innerHTML, but it doesn’t work. Why not? Is the syntax wrong?

	<p style="text-style:italic">Read As DataURL:</p>
	<p id="dataUrl"></p>

<script>
    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
        var element = document.getElementById('dataUrl');
        element.innerHTML = evt.target.result;
        };
        reader.readAsDataURL(file);
    }
</script>
2

Hi,

The code you posted seems reasonable and doesn’t have any obvious errors, therefore it is likely something else is at play.

Could you post an example of the first script working (i.e. add the appropriate HTML, show us how you are attaching the handler, etc.)

3

Sure. I am using the code from http://docs.phonegap.com/en/3.3.0/cordova_file_file.md.html#File

<!DOCTYPE html>
<html>
  <head>
    <title>FileReader Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readDataUrl(file);
        readAsText(file);
    }

    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as data URL");
            console.log(evt.target.result);
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as text");
            console.log(evt.target.result);
        };
        reader.readAsText(file);
    }

    function fail(error) {
        console.log(error.code);
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Read File</p>
  </body>
</html>
4

Hi,

That’s not really a reproducible example :slight_smile:

I tried downloading cordova.js from its GitHub repo, but I got the error

Uncaught ReferenceError: require is not defined

What I had intended (and I’m sorry if I miscomunicated this) was that you post enough code or make a JS fiddle that I can run and see the appropriate output in the the console (without me having to hunt around the internet for libraries).

I can then hopefully tell you the best way to achieve your aim and inject the output into the DOM as opposed to log it to the console.

5

Oooops … I think you wanted my own code:

    <body>

        <input type="button" class="buttonClass" onclick='window.location="index.html"' value="Return">

<!-- ********************* Read File begin *********************** -->
<div class="segment">
	<h2>Read File</h2>
	<p style="text-style:italic">Read As DataURL:</p>
	<p id="dataUrl">&nbsp;</p>
	<p style="text-style:italic">Read As DataText:</p>
	<p id="dataText">&nbsp;</p>
</div>

<script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readDataUrl(file);
        readAsText(file);
    }

    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
        var element = document.getElementById('dataUrl');
        element.innerHTML = evt.target.result;
        //    console.log("Read as data URL");
         //   console.log(evt.target.result);
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
        var element = document.getElementById('dataText');
        element.innerHTML = evt.target.result;
         //   console.log("Read as text");
         //   console.log(evt.target.result);
        };
        reader.readAsText(file);
    }

    function fail(error) {
        console.log(error.code);
    }

    </script>

[ … other stuff here …]

6

Cordova.js is used in conjunction with a vast library; it can’t be used by itself. Thanks for trying!

7

Oh dear, I’m afraid we’re getting our wires crossed.

I would like to see an example of your script working.
That is to say a link I can visit, a JSFiddle, or enough code that I can copy and paste to run this locally.

As it is, I’ve not much idea what this script should do, how to run it, or what dependencies it has :slight_smile:

8

I can’t; it’s a full library that has to be compiled as an Android apk file before it could be used.