Click here to Skip to main content
13,044,428 members (112,693 online)
Rate this:
Please Sign up or sign in to vote.
I have written a simple application in Javascript, that inserts images or text into a div and user can drag around with the images or text in the div. From some moment, the button "Pridat" (in english "Add") was doing nothing and when I debugged it, it threw no error. Here is the whole HTML file, copy it, create css and try to fix it. I can't see any error. I even commented the lines where the error could be, but I haven't found it.
Can you fix my Javascript simple function and tell me where is an error?

Thanks a lot!

Pepin z Hane

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
    <link rel="Stylesheet" href="StyleSheet.css" type="text/css" media="screen"/>
    <script type="text/javascript" src=" "></script>
    <script type="text/javascript" src=" "></script>
    <script type="text/javascript">
        $(function () {
            $(".draggable").draggable({ containment: "parent" });
    <script type="text/javascript">
        function AddElement() {
            var path = $("#ListBox1").val();    //value of the selected item
            var ImgID = "Img" + $("#Counter").text();   //gets a value of the label with the id Counter and saves it into the ImgID, which is used as a unique id for each object.
            var count = parseInt($("#Counter").text()) + 1; //increments Counters value for another object.
            $("#Counter").text(count);  //saves incremented value
            if ($("#Textbox1").val().toString() == "") {
                //if user has not write any text, insert to screen image.
                $("#divStyle").append("<div class=\"draggable\" id=\"" + ImgID + "\"><img class=\"img\"  src=\"" + path.toString() + "\"></div>");
            else {
                //else insert Text
                $("#divStyle").append("<div class=\"draggable\" id=\"" + ImgID + "\"><p class=\"text\">" + $("Textbox1").val() + "</p></div>");
            $(".draggable").draggable({ containment: "parent" });   //call draggable for dragging the elements (included the new element) by user.
        <form name="form1" action="Index.htm">
        <select id="ListBox1" name="lbItems" multiple="multiple">
        <option value="/Images/Devotion.bmp">Devotion</option>
        <option value="/Images/Devotion3.bmp">Devotion3</option>
        <option value="/Images/DSK.jpg">DSK</option>
        <option value="/Images/HC Oceláři Třinec.png">HC Oceláři Třinec</option>
        <option value="/Images/Logo_Auto_Skoda.jpg">Škoda Auto</option>
        <input name="Textbox1" id="Textbox1" type="text" value=""/>
        <br />
        <button class="styleButton" onclick="AddElement()">Přidat</button>
        <label id="lb1">vybráno</label>
        <button class="styleButton" onclick="PrintElementProperties()">Vypiš</button>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <div id="platno">
            <p class="draggable" style="height:75px; width:100px;">Drag me around</p>
        <label id="Counter">0</label>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <div id="vypis">

Posted 20-Apr-13 13:52pm
Sergey Alexandrovich Kryukov 20-Apr-13 21:30pm
First of all, it's good to start any jQuery-based script with document.ready...
Why did you tell as about Pridat function is you never show it?

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

I will not fix it to you but i will try to put you in the right direction.

First thing i could notice is that you don't have a div(or any element) with the ID="divStyle".
The second thing is that you are probably receiving error messages because there are no one option active in the SELECT list
Third, you could use a single quote ' inside double-quoted "" strings.
Fourth, Here..
$("#divStyle").append("<div class="\"draggable\"" id="\""" imgid=""><p class="\"text\"">" + $("Textbox1").val() + "</p></div>");

you have forgoten to add the "#" to the selector

//should be this

Fifth, if you need a counter you could use a var instead of always be reading and parsing an element's text, and is a good practice to pass the radix to the parseInt function -> parseInt("10", 10)[^]

Sixth, your button

<button class="styleButton" onclick="AddElement()">Přidat</button>

should have the type "Button"
<button type="button" class="styleButton" onclick="AddElement()">Přidat</button>

or, because it's inside a form, it will always cause a post-back.
And try to avoid writing inline javascript code. You are using jQuery there are some other ways to add click handling functions

hope it helps, and please let me know if don't.
Pepin z Hane 21-Apr-13 7:23am
Only thing what was wrong was, that I have renamed divStyle to platno. Thanks a lot!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170713.1 | Last Updated 20 Apr 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100