Adding HTML input using javascript DOM create element

  • Hello
    I am trying to create a hotspot that has an input field and several images that serve as buttons to activate js functions
    However i am unable to make the input fields accept any type of text and when i click it, it just activates the hotspot
    here's a part of the code im using to create it -

    function CreateContainerDiv(Title,Content,t,l,n,caller)
    {
    var New=n;
    var div=document.createElement("div");
    div.id="Container"+New;
    div.class="Container";
    div.style.width = "500px";
    div.style.height = "500px";
    div.style.position = "absolute";
    div.style.top = '0px';
    div.style.left = '0px';
    document.body.appendChild(div);
    caller.sprite.appendChild(div); // create the object using krpano sprite
    InfoSpotImage(New);
    CreateFrameDiv(Title,Content,New);
    }
    function CreateFrameDiv(Title,Content,New)
    {
    var div=document.createElement("div");
    div.id="Frame"+New;
    div.className="Frame";
    div.style.position = "absolute";

    document.body.appendChild(div);
    var foo = document.getElementById("Container"+New);
    foo.appendChild(div);
    CreateContentDiv(Title,Content,New);
    ExitButton(New);
    SaveButton(New);
    }
    function CreateContentDiv(title,Content,New)
    {
    var Title=document.createElement("input");
    Title.id="Title"+New;
    Title.className="Title";
    Title.type="text";
    Title.value=title;
    // document.body.appendChild(Title);
    var foo = document.getElementById("Frame"+New);
    foo.appendChild(Title);
    //---------------------
    var TextBox=document.createElement("div");
    TextBox.width="500"
    TextBox.height="500"
    var texts = document.createTextNode(Content);
    TextBox.id="EditBox"+New;
    TextBox.className="EditBox";
    document.body.appendChild(TextBox);
    TextBox.appendChild(texts);
    var foo = document.getElementById("Frame"+New);
    foo.appendChild(TextBox);

    }
    I call this in krpano xml using this -

    <action name="create_hotspot" type="Javascript">

    if(!document.getElementById('Container2')){
    CreateContainerDiv(args[1],args[2],0,0,2,caller);
    }
    </action>
    which i call from a hotspot using the propper arguments

    This is the best way i found to do this however its not working in Krpano (it works perfectly in HTML environment)
    I can't make the generated input field to accept any input, when i click it, it just activates the hotspot again thats why i added the "if" statement to prevent it from creating it multiple times.
    the input value needs to be readable so i can save its value in a database
    I tried using focus() and text field pluging but neither worked

    additoional problem i have is that Frame and Content are not using the height and width of Container and get sqeezed in the hotspot but that is lower priority now

    Any help will be apreciated

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!