document.write Javascript function

Question

Here's my code:

<script LANGUAGE="Javascript">
        function choiceReturn(obj) {
            switch(obj.value) {
                case "1":
                    document.write("<input value='Fund (L###)' type='text' 
                    class='button3' onfocus='if(this.value == "Fund (L###)"){this.value = '';}' 
                    onblur="if(this.value == ''){this.value = 'Fund (L###)'}">");

            }
        }
        </script>

<select name="funds_menu" onchange="choiceReturn(this);">
            <option selected>Choose 1 to 3</option>
            <option value="1">1. Choose fund</option>
            <option value="2">2. Prepare data</option>
            <option value="3">3. Perform valuation</option>
            </select>

My intention: Upon selecting the first item from the list, the Fund (L###) input box appears. I also have some minor code onblur and onfocus to make this a bit cooler.

However, nothing happens. What am I doing wrong? There's a lot of quotation marks there. Perhaps that's what's messing this up.

Oh, I see. Do you know how to input HTMl inside Javascript code? — KSHMR
– KSHMR, Commented Jul 7, 2014 at 17:29
@gud ideally, you should be using dom manipulation. If you really want to use html, there is `.innerHTML — John Dvorak
– John Dvorak, Commented Jul 7, 2014 at 17:45

tckmn · Accepted Answer · 2014-07-07 17:34:52Z

2

Multiline strings aren't a thing in JavaScript. You're going to have to concatenate them separately. Furthermore, some of your nested nested strings aren't escaped properly.

Fixed code:

document.write("<input value='Fund (L###)' type='text' " +
    "class='button3' onfocus='if(this.value == \"Fund (L###)\"){this.value = \"\";}' " + 
    "onblur='if(this.value == \"\"){this.value = \"Fund (L###)\"}'>");

However, document.write is generally A Bad Idea™, and DOM manipulation via methods like document.createElement, element.setAttribute (or setting them directly with the JS DOM API), element.addEventListener, and element.appendChild are almost always a better approach.

Here's the code rewritten to not use document.write:

var inputElement = document.createElement('input');
inputElement.value = 'Fund (L###)';
inputElement.type = 'text';
inputElement.className = 'button3';
inputElement.addEventListener('focus', function() {
    if (this.value == "Fund (L###)") {
        this.value = "";
    }
});
inputElement.addEventListener('blur', function() {
    if (this.value == "") {
        this.value = "Fund (L###)"
    }
});
document.getElementById('someElement').appendChild(inputElement);

Also note that what you're trying to do already exists: placeholder="Fund (L###)".

edited Jul 7, 2014 at 17:34

answered Jul 7, 2014 at 17:29

tckmn

59.6k27 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KSHMR Over a year ago

That is indeed a bad idea. All of the webpage is erased when I use write() as Jeff Shaver said! I tried all of these but none of them work so I'm doing something wrong. Can't I just replace them with write()?

tckmn Over a year ago

@Gudmundur I've edited the answer to include further information.

RevanProdigalKnight Over a year ago

You can have multiline strings without having to append strings to strings, you just need to put a `\` at the end of each line inside the string. It's generally considered to be bad coding practice, though, not to mention it's sort of inconvenient.

KSHMR Over a year ago

Thank you for your help Doorknob!

Collectives™ on Stack Overflow

document.write Javascript function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related