Использование Javascript, чтобы установить переменную в одной функции, а затем вызвать ее во второй функции

0

Я должен создать страницу, где вы можете использовать графический интерфейс для выбора параметров, а затем отобразить готовый продукт.

Для упрощения просто знайте, что есть три переменные - верх, низ, цвет.

Каждая переменная имеет 3 типа. TopStyle1, TopStyle2, TopStyle3... BottomStyle1, BottomStyle2, BottomStyle3... Color1, Color2, Color3.

Поэтому у меня есть изображение для каждого стиля, поэтому при выборе (onClick) TopStyle1. Если изображение, представляющее TopStyle1, переходит в состояние "Вкл" (просто другое изображение с золотым кружком вокруг него, указывающим на ваш выбор), а TopStyle2 и TopStyle3 переходят в состояние "Не выбрано" (изображения изменяются в серые версии самих себя). Если вы снова нажмете на TopStyle1, все стили будут переведены в состояние "Выкл." (Их исходные изображения).

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

function topstyle1() {

    if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style1";
    }
    else if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style1";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

function topstyle2() {

    if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style2";
    }
    else if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style2";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

function topstyle3() {

    if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
        var top="style3";
    }
    else if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
        var top="style3";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

В конце каждой функции, после изменения изображений, я пытаюсь установить переменную в зависимости от того, какая функция вызывается.

Поэтому, если вы нажмете на TopStyle1, вы увидите var top = "style1"... если вы измените его на TopStyle2 var top = "style2" и так далее.

После того, как вы выбрали "Сверху", "Снизу" и "Цвет", есть кнопка с надписью "Просмотр завершенного элемента". Когда вы нажимаете на эту кнопку, я хочу вызвать новую функцию, которая будет отображать изображение на основе вашего выбора. На данный момент я был бы рад просто отобразить текст из переменных, но я не знаю, как заставить их отображаться.

Я пробовал это:

function changeImage() {
    document.getElementById("display").innerHTML=top;
    }

Но я думаю, что содержимое переменной исчезло, когда я дошел до этой точки.

Должен быть способ установить переменную на основе моих выборов, а затем вызвать их в другой функции, но из-за моей неопытности мне трудно найти ответ.

  • 1
    У вас есть возможность серьезного сокращения кода. Всякий раз, когда вы видите повторяющийся код, который почти полностью идентичен, вы обычно можете абстрагировать его в функцию, которая получает аргумент для установки различных частей.
  • 0
    Спасибо за вклад. Я думаю, что вижу / понимаю, к чему ты клонишь. Я рассмотрю это позже, а сейчас я просто пытаюсь заставить всю концепцию работать. (шаги малыша)
Показать ещё 1 комментарий
Теги:
function
variables
onclick

3 ответа

0
Лучший ответ

Возьмите верхнюю переменную за пределами области действия

var top = "";
function topstyle1() {

if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style1";
}
else if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style1";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

function topstyle2() {

if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style2";
}
else if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style2";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

function topstyle3() {

if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
    top="style3";
}
else if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
    top="style3";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

Поделиться
  • 0
    Так просто! Это работает, спасибо!
0

Вам нужно использовать правильную область действия переменной. Возьмем, например, следующее:

var top;

function set_top(){
    top = 'Hello World';
}

function log_top(){
    console.log( top );
}

set_top();
log_top();

Консоль будет записывать "Hello World", потому что переменная top является глобальной переменной. Он доступен по всем функциям и может быть использован/перезаписан в любое время. В настоящее время то, что у вас есть, переменная top доступна только внутри каждой функции (что делает ее локальной переменной или локальной областью).

Для получения дополнительной информации я бы рекомендовал проверить: Какова область переменных в JavaScript?

Поделиться
  • 0
    Я также попробую этот метод, спасибо за информацию и ссылку. Есть ли какая-то причина, по которой этот метод лучше, чем тот, который предлагает QBM5?
  • 0
    Это точно так же. Они установили top как глобальную переменную, чтобы он был доступен во всех ваших функциях.
0

Вам нужно объявить свою "верхнюю" переменную вне вашей функции, чтобы выполнить это.

var x = 0;
function increase_x() {
    x++;
}
function decrease_x() {
    x--;
}

http://jsfiddle.net/6LhtX/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню