HTML/Javascript issue

Question

I'm having an issue writing some code for a website. It's written in HTML/Javascript. I've managed to write a large chunk of code that seems to work alright, but this issue is now I can't seem to have multiple line strings within Javascript.

<!DOCTYPE html>
<html>
<head>
<title>Multiline test</title>
</head>

<body>

<p>Select variable value below:</p>

<div>
    <form name="form001">
        <select name="choice">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </form>
</div>

<p id="selection"></p>

<script type="text/javascript">

    // First, get the <select> element. findElementsByName() returns a collection,
    // we only want the first elements that's found (hence the [0]):
    var choice = document.getElementsByName('choice')[0];

    // Now, get a reference to the <p> where we'll show the result:
    var selectionP = document.getElementById('selection');

    // This Array will hold the labels. label[0] will be 'Text1', labels[1] 'Text2', etc.
    var labels = [
        "Multiline test \n Multiline test",
        "Text2",
        "Text3"
    ];

    // Now attach a handler to the onchange event.
    // This function will be executed if the <select>ion is changed:
    choice.onchange = function() {
        var optionIndex = choice.selectedIndex; // The index of the selected option
        var text = labels[optionIndex]; // The label that corresponds to that index
        selectionP.innerHTML = text;
    };

</script>

</body>

This is the updated code. Now all I need is a multiline work around.

wow :O - first remove html from inside script tags (unless inside a string. `var a = '
';` — paulcol., Dec 22 '11 at 13:57
I'm sorry nikc, I"m rather new to these languages and I'm not sure what you mean. — Eridias, Dec 22 '11 at 14:00
Next, write Javascript, not VB. For example, variables are `var foo = value;` and cannot start with a number. And `function js001() {` — Dark Falcon, Dec 22 '11 at 14:01
@Madmartigan That was an issue I created when pasting the code here. My mistake, it has been changed. The Javascript still isn't showing up. — Eridias, Dec 22 '11 at 14:11
When you say "Javascript still isn't showing up", you mean it's "not working", right? You don't expect it to appear on the page do you? Use this tool to help debug javascript: http://getfirebug.com/ I'm sorry, but this is a real doozy, I'm not sure how to help outside of saying it's time to hit the books for a while. The js is as broken as your HTML. — Wesley Murch, Dec 22 '11 at 14:14
@Madmartigan I expect "Text" + choice + "Text" that was written in Javascript to show up. I don't understand where my error(s) are. — Eridias, Dec 22 '11 at 14:18

score 1 · Answer 1 · answered Dec 22 '11 at 14:21

1

This

document.form001.choice
"Text" + choice + "Text"}

Doesn't make any sense, does it? You need to do something like

var choice = document.form001.choice
"Text" + choice + "Text"}

By the way to follow the flow of your JavaScript program you should use Google Chrome's JavaScript Console. It really help understanding what's going on.

answered Dec 22 '11 at 14:21

Masiar

20,450
31
97
140

1

Also, choice is an element, not a value. Not sure if that was intentional or not though; I left it alone. – Jeffrey Sweeney Dec 22 '11 at 14:27
I was underlining the error, not really explaining how to take out the values from a `select` tag, but yes, you are right. – Masiar Dec 22 '11 at 15:06
You need to use `document.form001.choice.value` as `choice` is an object, with a `value` property that contains the selected value from the dropdown. – Richard Ev Dec 22 '11 at 15:08
I think `document.form001.choice` is an array, thus you should specify which option are you focusing on before getting the `.value` attribute out of it. – Masiar Dec 22 '11 at 17:22

Peter-Paul van Gemerden · Answer 2 · 2011-12-22T14:35:33.427

Note: I've put up a working example of this code here: http://jsfiddle.net/F87tJ/

Let's take the following HTML:

<html>
    <head></head>
    <body>
        <p>Select variable value below:</p>
        <div>
            <form name="form001">
                <select name="choice">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </form>
        </div>
        <script type="text/javascript">
            // JavaScript goes here
        </script>
    </body>
</html>

Now, I'm going to assume you want to respond to the user changing the selection of the dropdown box. This is pretty easy in JavaScript. Just get a reference to the <select> element and attach an event handler to it. An event handler is just a function that will be called when the given event occurs. In this case:

// First, get the <select> element. findElementsByName() returns a collection,
// we only want the first elements that's found (hence the [0]):
var choice = document.getElementsByName('choice')[0];

// Now attach a handler to the onchange event.
// This function will be executed if the <select>ion is changed:
choice.onchange = function() {
    // Do something
};

With me so far? Good.

Now, you wanted to show 'Text1', 'Text2' or 'Text3', based on the selection, right? So, we have to know which <option> is selected. That, too, is easy:

var optionIndex = choice.selectedIndex;

This will just give you a zero-based index of the selected <option>. So, if the first option is selected, optionIndex will have value 0.

To show some text based on the selection, we need some strings. Since we're dealing with a collection here, let's put it in an array:

var labels = [
    "Text1",
    "Text2",
    "Text3"
];

Arrays in JavaScript are also zero-based, so label[0] will be 'Text1', labels[1] 'Text2', etc.

If we bring it all together, we get something like this:

var choice = document.getElementsByName('choice')[0];

var labels = [
    "Text1",
    "Text2",
    "Text3"
];

choice.onchange = function() {
    var optionIndex = choice.selectedIndex; // The index of the selected option
    var text = labels[optionIndex]; // The label that corresponds to that index

    alert(text);
};

I hope this helps. :-)

That did help, but when I attempt to implement it the Javascript does not appear. I've used to use your Javascript code, but when I attempt to execute it, it doesn't work. I'm fairly sure it's my problem. I just need to find the issue and resolve it. — Eridias, Dec 22 '11 at 14:46
Have you also taken a look at your HTML? Here's a full-page version of my example: http://pastie.org/3057578. How does that compare to yours? Can you paste a full version of your page on pastie.org? — Peter-Paul van Gemerden, Dec 22 '11 at 14:53
I believe I've found this issue. In my actual code the "Text1", "Text2", "Text3" are actually large paragraphs for each of them. For some reason this breaks it. Is there a way to fix this? — Eridias, Dec 22 '11 at 15:04
Yes. If a string spans multiple lines, you have to escape the newline character, like discussed here: http://stackoverflow.com/questions/805107/multiline-strings-in-javascript — Peter-Paul van Gemerden, Dec 22 '11 at 15:10
I've looked at that, and I've tried several solutions. None of them seem to work. I also tried \n, \, and ""+"". I'm at loss here. — Eridias, Dec 22 '11 at 15:22
Ah, I see your confusion. The text will go into HTML, where browsers ignore any superfluous whitespace. To display an actual line break, you have to use the HTML `
` tag, like so: `"This string spans
multiple lines."`. — Peter-Paul van Gemerden, Dec 22 '11 at 15:34

score 1 · Answer 3 · answered Dec 22 '11 at 14:29

1

i noticed you wrote:

Now what I believe to be happening is that when it's not calling the Javascript function as it is supposed to.

Inside your function either:

write:

console.log('this function is being executed');
// this will make a line show up in the chrome document inspector / firebug console (just google those)

or

alert('This function is being executed!')

That should help with troubleshooting a lot.

answered Dec 22 '11 at 14:29

Andrew Plummer

1,150
1
12
21

For troubleshooting I like **//alert("calling load_table"); load_table(); //alert("DONE calling load_table");** ... that way you know that a function both starts and finishes. – Dallas Dec 23 '11 at 02:09

score 0 · Answer 4 · answered Dec 22 '11 at 14:26

I rewrote problem areas in your code, and added comments to show what was changed.

<!DOCTYPE html> <!-- HTML pages should have a DOCTYPE header, as well as html, head, and body tags. -->
<html>
    <head>
        <title></title>
    </head>
    <body>

        Text 
        Text 
        Text 
        Text
        <br/>
        <br/>
        Select variable value below:
        <br/>
        -
        <div>
            <form name="form001">
                <select name="choice">
                    <!-- <size=3> Don't think there's a such thing as a size tag -->
                        <option value=1 selected="selected">1</option>
                        <option value=2>2</option>
                        <option value=3>3</option>
                </select>
                <script type="text/javascript">
                    function js001(){   //This was missing paranthesis
                        var v1 = "Text1"
                        var v2 = "Text2"
                        var v3 = "Text3"

                        var choice = document.form001.choice; //choice wasn't defined
                        alert("Text" + choice + "Text");

                        }
                    </script>
                <script type="text/javascript">
                    //js001();
                    </script> <!-- The S needed to be lowercase here -->
                <div class="pagetext">
                    <br/>
                    <br/>
                    Text
                    <br/>
                    <br/>
                    Text
                    <div>

    </body>
</html>

Thanks, but I'm afraid that It's still not appearing (js001(); was not meant to be a comment, that was calling the function). This is frustrating, but thanks for the help none the less. — Eridias, Dec 22 '11 at 14:31

Richard Ev · Answer 5 · 2011-12-22T15:01:12.740

Here's another version which I think will do what you need.

When the user selects an item from the dropdown, it displays a text string below the dropdown that corresponds to the item that the user selected.

<html>
<body>
    <form name="form001">
        <!-- when the user changes the selected item in this dropdown, -->
        <!-- the JavaScript function "js001()" will get called -->
        <select name="choice" onchange="js001()">
            <option value=0 selected="selected">1</option>
            <option value=1>2</option>
            <option value=2>3</option>
        </select>
    </form>

    <!-- This is the div in which the selected item's related text will be shown -->
    <div id="selectedStuff"/>

    <script type="text/javascript">
    function js001()
    {
        // Rather than use separate variables for each value,
        // it is simpler if we store them in an array
        var values = ["Text1", "Text2", "Text3"];

        // The value of the selected item in the dropdown maps to the index in the values
        // array for the text we want to show
        var valueIndex = document.form001.choice.value;

        var text = "Text" + values[valueIndex] + "Text"

        document.getElementById("selectedStuff").innerHTML = text;
    }

    // When the page loads it makes sense to call the js001() function,
    // so that the text for initially-selected dropdown value gets shown
    js001();
    </script>
</body>
</html>

HTML/Javascript issue

5 Answers5