HTML / Javascript проблема - PullRequest
Новая
       3

HTML / Javascript проблема

0 голосов
/ 22 декабря 2011

У меня проблема с написанием кода для веб-сайта.Это написано в HTML / Javascript.Мне удалось написать большой кусок кода, который, кажется, работает нормально, но теперь проблема в том, что я не могу иметь несколько строк в Javascript.Теперь все, что мне нужно, это многострочный обход.

Ответы [ 5 ]

1 голос
/ 22 декабря 2011

я заметил, что вы написали:

Теперь я верю, что когда я не вызываю Функция Javascript, как и положено.

Внутри вашей функции либо:

написать: 

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

или 

alert('This function is being executed!')

Это должно помочь в устранении неполадок.

1 голос
/ 22 декабря 2011

Примечание: я выставил рабочий пример этого кода здесь: http://jsfiddle.net/F87tJ/

Давайте возьмем следующий 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>

Теперь я собираюсь предположить, что вы хотите ответить пользователю, который изменил выбор выпадающего списка. Это довольно просто в JavaScript. Просто получите ссылку на элемент <select> и присоедините к нему обработчик события . Обработчик события - это просто function, который будет вызываться при возникновении данного события. В этом случае: 

// 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
};

Со мной так далеко? Хорошо.

Теперь вы хотите показать «Текст1», «Текст2» или «Текст3», основываясь на выборе, верно? Итак, мы должны знать, какой <option> выбран. Это тоже легко: 

var optionIndex = choice.selectedIndex;

Это просто даст вам нулевой индекс выбранного <option>. Таким образом, если выбран первый вариант, optionIndex будет иметь значение 0.

Чтобы показать текст, основанный на выделении, нам нужно несколько строк. Поскольку здесь мы имеем дело с коллекцией, давайте поместим ее в array: 

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

Array s в JavaScript также начинаются с нуля, поэтому label[0] будет 'Text1', labels[1] 'Text2' и т. Д.

Если мы соберем все это вместе, мы получим что-то вроде этого: 

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);
};

Надеюсь, это поможет. : -)

1 голос
/ 22 декабря 2011

Это 

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

Не имеет никакого смысла, не так ли?Вам нужно сделать что-то вроде 

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

. Чтобы следить за ходом вашей программы JavaScript, вы должны использовать JavaScript-консоль Google Chrome.Это действительно помогает понять, что происходит.

0 голосов
/ 22 декабря 2011

Вот еще одна версия, которая, я думаю, будет делать то, что вам нужно.

Когда пользователь выбирает элемент из раскрывающегося списка, под ним отображается текстовая строка, соответствующая элементу, выбранному пользователем. 

<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>
0 голосов
/ 22 декабря 2011

Я переписал проблемные области в вашем коде и добавил комментарии, чтобы показать, что было изменено. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...