Changing content of a div on button click

Question

Here's my button:

<p>File Uploaded:</p><fieldset><div id='fileloc'>"PROGRAMMATICALLY INSERTED LINK TO FILE" <button type='button' onclick='fileDelete()'>Delete</button></div></fieldset>

And here's my script to try to replace the values in the div with an upload button.

    <script type="text/javascript">
        var fileDelete = function() {
            var delDiv = document.getElementById("fileloc")
            delDiv.value('<p>Upload Support Document</p><fieldset><input type="file" name="file" id="file" /></fieldset>');
        }
    </script>

However I get the error:

delDiv.value is not a function.

Would I run document.delDiv? How would I go about doing this correctly?

score 2 · Answer 1 · edited May 23 '17 at 10:34

2

You should use delDiv.innerHTML = '<p>...'; instead. The value attribute exists typically for <input> elements, not <div>s.

Also, any reason you're doing var fileDelete = function() {} vs. function fileDelete() {}? See var functionName = function() {} vs function functionName() {} for the difference and whether one way applies to your problem over the other.

edited May 23 '17 at 10:34

Community

1
1

answered Nov 30 '11 at 17:21

Cᴏʀʏ

97,417
19
158
183

score 1 · Answer 2 · answered Nov 30 '11 at 17:22

1

I do not think it's value that you want, but innerHTML

document.getElementById("fileloc").innerHTML = '<p>Upload Support Document</p><fieldset><input type="file" name="file" id="file" /></fieldset>';

answered Nov 30 '11 at 17:22

djdy

6,575
5
35
61

score 1 · Answer 3 · answered Nov 30 '11 at 17:22

1

Use delDiv.innerHTML = '<p>...</p>';

answered Nov 30 '11 at 17:22

Tom van der Woerdt

28,143
7
67
105

score 1 · Accepted Answer · answered Nov 30 '11 at 17:22

1

It's not a value, it's inner markup. Try this:

delDiv.innerHTML = '<p>Upload Support Document</p><fieldset><input type="file" name="file" id="file" /></fieldset>';

answered Nov 30 '11 at 17:22

Polynomial

25,567
8
75
106

score 0 · Answer 5 · answered Nov 30 '11 at 17:22

0

you should be changing the innerHtml element instead

delDiv.innerHtml = 'your html';

answered Nov 30 '11 at 17:22

CSharpened

9,906
14
47
84

score 0 · Answer 6 · answered Nov 30 '11 at 17:23

0

Try setting the innerHTML property:

delDiv.innerHTML = '<p>Upload Support Document</p><fieldset><input type="file" name="file" id="file" /></fieldset>'

answered Nov 30 '11 at 17:23

dash

84,786
4
48
69

Thomas Kelley · Answer 7 · 2011-11-30T17:38:13.490

0

value is a property of the element, so it is set through the assignment operator:

delDiv.value =
    '<p>Upload Support Document</p><fieldset><input type="file" name="file" id="file" /></fieldset>';

However, I think your intent here is to set the HTML inside:

delDiv.innerHTML = 
    '<p>Upload Support Document</p><fieldset><input type="file" name="file" id="file" /></fieldset>';

...oh, and you forgot a semicolon on the previous line ;)

edited Nov 30 '11 at 17:38

answered Nov 30 '11 at 17:25

Thomas Kelley

9,707
1
34
41

I'm not the downvoter, but I imagine you were downvoted for introducing a SyntaxError by including an unescaped *LineTerminator* into your string literals. – RightSaidFred Nov 30 '11 at 17:33
Yikes... I'm stuck in PHP mode. Fixed it... Thanks! – Thomas Kelley Nov 30 '11 at 17:39

Jérémy Dutheil · Answer 8 · 2011-11-30T17:32:29.707

-1

You should use innerHTML : delDiv.innerHTML = "..."

edited Nov 30 '11 at 17:32

answered Nov 30 '11 at 17:22

Jérémy Dutheil

5,817
6
35
51

Changing content of a div on button click

8 Answers8