Home > DeveloperSection > Forums > can't figure out how to link my javascript into my html
E E Cummings
E E Cummings

Total Post:26

Points:182
Posted on    August-19-2013 1:10 AM

 JavaScript JavaScript 
Ratings:


 1 Reply(s)
 820  View(s)
Rate this:
Hi!

I"m trying to follow a tutorial online on how to make a Todo list

I finished the following code as follows

<!doctype html>

<html>

    <head>

    <title>To do list with html and javascript</title>

    <style>

    ul { list-style: none; padding: 0; margin: 0; width: 400px;}

    li { border: 1px solid #ccc; background: #eee; padding: 5px 10px; color: #000; }

    li span { padding-left: 10px; cursor: default;}

    .checked { text-decoration: line-through; font-weight: bold; color: #c00;}

        </style>

    </head>

    <body>

<h1>To Do List</h1>

<p><iput type="text" id="inItemText"/>

    <ul id= "todolist">

</ul>

<script type= "text/javascript" src="todo.js"</script>

    </body>

</html>

and

 

// Each item should look like <li><input type = "checkbox"/> do tutorial</li>

function updateItemStatus (){

    var cbId = this.id.replace("cb_","");

    var itemText = document.getElementbyId("item_" + cb.Id);

    if (this.checked) {

        itemText.className = "checked";

}   else {

        itemText.style.fontWeight = "";

}

}

function removeItem(){

    var spanId = this.id.replace("item","");

    document.getElementById("li_" + spanId).style.display = "none";

}

function addNewItem(list, itemText){

    var date = new Date ();

    var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();

    var listItem = document.createElement("li");

    list.Item.id = "li_" + id;

    var checkbox = document.createElement("input");

    checkbox.type = "checkbox";

    checkbox.id = "cb_" + id;

    checkBox.oneclick = updateItemStatus;

    var span = document.createelement("span");

    span.id = "item_" + id;

    span.innertext = itemText;

    span.ondblclick = removeItem;

    listItem.appendChild(checkbox);

    listItem.appendChild(span)

    list.appendChild(listItem);

}

var inItemText = document.getElementbyId("inItemText");

inItemText.focus();

inItemText.onkeyup = function (event) {

    // 13 means Enter

    if (event.which == 13) {

    var itemText = event.which;

    if (itemText == "" || itemText == " ") {

        return false;

    }

    addNewItem(document.getElementById("todolist") itemText);

    inItemText.focus();

    inItemText.select();

};

I have both files saved in the save folder on my desktop. The javascript is still not coming up. Did I type something in wrong. I'm just trying how to link the javascript to my html sorry its my first time doing this.




shreesh chandra shukla
shreesh chandra shukla

Total Post:105

Points:735
Posted on    August-19-2013 8:25 AM

Hi!

you forgot >

<script type= "text/javascript" src="todo.js"></script>

now it will work


Don't want to miss updates? Please click the below button!

Follow MindStick