CODEWITHSUNDEEP
javascripthtml
Rui
Rui

Reputation: 259

Clear Textbox value in my code

For some reason the clear function I wrote cannot clear my textbox, but it runs in another html file. Can someone figure out the problem for me? This assignment is due at 12:00 am today, please help! Thanks in advance.

    <script type="text/javascript">
        window.onload = function() {
            var container = document.getElementById("projector");
            var add_img = document.getElementById("add-img");

            function Clear() {
                document.getElementById("xi").value = " ";

            }


            add_img.onclick = function check() {
                var img = document.createElement("img");
                var h = document.getElementById("xi").value;
                var w = document.getElementById("yi").value;

                img.src = 'http://www.cryptocoinsnews.com/wp-content/uploads/2013/12/bitcoin-google.jpeg';

                img.setAttribute("height", h);
                img.setAttribute("width", w);

                document.getElementById("projector").appendChild(img);
            }
            //This is my "clear textbox function" but it doesn't run？
            function Clear() {

                document.getElementById("xi").value = " ";
                document.getElementById("xi").value = " ";

            }

            //This is my "clear textbox function" but it doesn't run？

        }

    </script>

    <input type="text" id="xi" value="200">
    <input type="text" id="yi" value="200">
    <input type="button" id="add-img" value="Add Image" onclick='Clear()';>

    <div id="projector"></div>

Upvotes: 0

Views: 3743

Answers (3)

endofsource
endofsource

Reputation: 364

You assign you Clear() function via html and then override the onclick in your code.
I would just add it to your code.

Like this: 

add_img.onclick = function check() {
   var img = document.createElement("img");
   var h = document.getElementById("xi").value;
   var w = document.getElementById("yi").value;

   img.src = 'http://www.cryptocoinsnews.com/wp-content/uploads/2013/12/bitcoin-google.jpeg';

   img.setAttribute("height", h);
   img.setAttribute("width", w);

   document.getElementById("projector").appendChild(img);
   Clear();
}

And remove it from HTML:

<input type="button" id="add-img" value="Add Image">

Edit:

Change you Clear() function to this to correct a typo:

function Clear() {
   document.getElementById("xi").value = " ";
   document.getElementById("yi").value = " ";
}

Upvotes: 0

lazybloke
lazybloke

Reputation: 445

First off you have two functions called Clear.

Then its probably easier to call Clear once the click on the button is completed (within the function to handle that).

To end up with..

<script type="text/javascript">
    window.onload = function() {
    var container = document.getElementById("projector");
    var add_img = document.getElementById("add-img");


    add_img.onclick = function check() {
        var img = document.createElement("img");
            var h = document.getElementById("xi").value;
            var w = document.getElementById("yi").value;

            img.src = 'http://www.cryptocoinsnews.com/wp-content/uploads/2013/12/bitcoin-google.jpeg';

            img.setAttribute("height", h);
            img.setAttribute("width", w);

            document.getElementById("projector").appendChild(img);

            Clear();

        }
        //This is my "clear textbox function" but it doesn't run？
        function Clear() {
            document.getElementById("xi").value = " ";
            document.getElementById("yi").value = " ";
        }

        //This is my "clear textbox function" but it doesn't run？

    }

</script>

<input type="text" id="xi" value="200">
<input type="text" id="yi" value="200">
<input type="button" id="add-img" value="Add Image">

<div id="projector"></div>

Upvotes: 1

friedi
friedi

Reputation: 4360

You've already registered a onclick-event in the code. So don't use the onclick-property in the html. Call the Clear-function in the Code like so:

add_img.onclick = function check() {
    var img = document.createElement("img");
    var h = document.getElementById("xi").value;
    var w = document.getElementById("yi").value;

    img.src = 'http://www.cryptocoinsnews.com/wp-content/uploads/2013/12/bitcoin-google.jpeg';

    img.setAttribute("height", h);
    img.setAttribute("width", w);

    document.getElementById("projector").appendChild(img);

    Clear();
}

And remove the onclick-property:

<input type="button" id="add-img" value="Add Image" />

Upvotes: 3

Related Questions