CODEWITHSUNDEEP
javascripthtmlvariables
Fendon
Fendon

Reputation: 3

Display data from variable

Let me open by quickly mentioning I'm brand new to this coding stuff, so I'm sorry if I need things in with a teaspoon.

I'm trying to use a finished java script file to display some data on my page using html.

This is the javascript:

var Dictionary = function(words) {

this.search = function(query) {
    var pattern = new RegExp(query, "i"); // i - ignore case
    return $.grep(words, function(w) {
        return pattern.test(w);
    });
};


this.size = function() {
    return words.length;
}


this.all = function() {
    return words;
}

}

My only task right now is to display this "words" variable that it mentions, but I can't figure out how to display it using html, even though it looks like most of the work is done in the javascript.

I've tried a few desperate things, like "return.dictionary", but that didn't do anything. I hope you can help me out.

My html:

<!DOCTYPE html>

<!--
  SAMABARBEIDSPARTNERE:

-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>IS-104 Søkeside (LAB1)</title>

<!-- Aktuelle Javascript biblioteker laste inn her -->
<!-- Last inn en versjon av jquery her -->
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="lab1-words-small.json"></script>

<script type="text/javascript" src="lab1-dictionary.js"></script>

<script type="text/javascript">
// <![CDATA[

// Here er en "hack" for å kunne tvinge denne delen av JavaScript koden å kjøre
// etter at resten av siden er ferdig lastet i din nettleser.
$(document).ready(function() {
    var dict = new Dictionary(words);
    // Din kode kan skrives her

});

// ]]>
</script>


-->
<style type="text/css">

/* Eventuelt din CSS her. Dette er kun et eksempel. */
    html {
        background-color: #C0C0C0;
    }
    h1{
        font-family: Verdana, Serif;
        text-align: center;
    }

    nav ul{height:200px; width:18%; background-color: #FFFFFF; margin: auto; position: relative; right:50px}
    nav ul{overflow:hidden; overflow-y:scroll;}

    form{
        width:500px;
        margin:50px auto;
        position: relative;
        left: 95px;
    }
</style>

</head>
<body style="align:center">
<!-- Din HTML skrives her -->
    <h1>
        Dette er en liste og søkeside for en ordbok.
    </h1>
    <form>
        <input type="text" placeholder="Search..." required>
        <input type="button" value="Search">

    </form>
    <nav>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
            <li>List 4</li>
            <li>List 5</li>
            <li>List 6</li> 
            <li>List 7</li> 
            <li>List 8</li>
            <li>List 9</li>
            <li>List 10</li>
            <li>List 11</li>
            <li>List 13</li>
            <li>List 13</li>
        </ul>
    </nav>
    <!--<div style="width:500px; height:50px; background-color:grey; margin: auto; position: relative; bottom: 300px;"></div> -->

    <script>{
    var Dictionary = function(words) {...},
            words = Dictionary(words);

            document.getElementbyId("some_id").innerHTML= words; 
    }

    </script>

    <div id="ordid">

    </div>

</body>
</html>

Upvotes: 0

Views: 805

Answers (1)

user63762453
user63762453

Reputation: 1734

You can use:

document.write(var_name)

but it will display the output on a blank page. An alternate can be to use document.getElementById("some_id").innerHTML like this:

First create a <div> (for ex.) in your HTML:

<div id="some_id">

</div>

and then write this in your JavaScript:

document.getElementById("some_id").innerHTML=var_name;

Hope this clears up things.

DEMO

UPDATE:

After seeing the HTML you added, you need to write document.getElementById instead of document.getElementbyId

and in place of document.getElementById("some_id") you need to write the id of your <div> which I guess isordid.

<div id="ordid">

</div>

(From your code)

A parial Demo of your code.

You may see 10 at the top.

Upvotes: 1

Related Questions