Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.12.2023, 08:50
Новичок на форуме
Отправить личное сообщение для alrosavilla Посмотреть профиль Найти все сообщения от alrosavilla
 
Регистрация: 27.06.2023
Сообщений: 9

Помогите упростить код
Здравствуйте.
Написал JS код такого рода.
Есть массив констант. Каждая содержит короткую фразу (подсказку). При клике на кнопку определенные фразы из массива вставляются в определенные дивы. Дивы помечены такими же именами как и константы из массива поэтому нужная фраза попадает в нужный див.
Я новичок и код написал кривенько. Дело в том что пришлось сделать второй массив с именами констант, и это не удобно, когда нужно добавлять новые константы.
Посмотрите, пожалуйста, может у вас будут идеи как от второго массива уйти?

export const gerAftPrep = "they normally put gerunds after prepositions";
export const presPerf = "brace yourself, it's the Present Perfect";
export const negatives = "need a special verb before not";
export const posPron = "possessive pronouns may be with you";
export const americans = "Americans often use the past simple instead of the present perfect";
export const toBe = "Check out the forms of to be";
export const prepTo = "Check out the prepositions of movement"

let tipNames = ["gerAftPrep", "presPerf", "negatives", "posPron", "americans", "toBe", "prepTo"];
let tips = [gerAftPrep, presPerf, negatives, posPron, americans, toBe, prepTo];
export function showTips()
    {   
        let elements = document.querySelectorAll('p[name]');
        elements.forEach(function(element,i)
            {
                let nameElement = element.getAttribute("name");
                tipNames.forEach(function(value, index)
                    {
                        if (value === nameElement)
                        {
                            element.textContent = tips[index];
                        }
                    }
                )
            }           
        )
    }
Ответить с цитированием
  #2 (permalink)  
Старый 07.12.2023, 09:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

alrosavilla,
странные у вас div-ы p[name]

создайте объект и тогда никаких массивов и один цикл всего, по ключам массива.
Ответить с цитированием
  #3 (permalink)  
Старый 07.12.2023, 09:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

alrosavilla,
<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <p data-name="gerAftPrep"></p>
    <p data-name="presPerf"></p>
    <p data-name="negatives"></p>
    <script>
        let tips = {
            gerAftPrep: "they normally put gerunds after prepositions",
            presPerf: "brace yourself, it's the Present Perfect",
            negatives: "need a special verb before not"
        };

        function showTips() {
            let elements = document.querySelectorAll('p[data-name]');
            elements.forEach(function(element) {
                let name = element.dataset.name;
                if (name in tips) element.textContent = tips[name];
            })
        }
        showTips()
    </script>
</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 07.12.2023, 11:36
Новичок на форуме
Отправить личное сообщение для alrosavilla Посмотреть профиль Найти все сообщения от alrosavilla
 
Регистрация: 27.06.2023
Сообщений: 9

рони,
спасибо большое! Все работает, и так гораздо проще!
Див-ы странные, это правда. Просто параграфы находятся внтури див-ов, не стал об этом писать.
Не знал про dataset. Сейчас посмотрел, очень удобный инструмент.
А получается что в строке "if (name in tips) element.textContent = tips[name]" функция смотрит есть ли такое имя в объекте tips и, если есть, то в итерируемый элемент вставляется текст из объекта с таким же именем?
Ответить с цитированием
  #5 (permalink)  
Старый 07.12.2023, 17:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от alrosavilla
А получается что в строке "if (name in tips) element.textContent = tips[name]" функция смотрит есть ли такое имя в объекте tips и, если есть, то в итерируемый элемент вставляется текст из объекта с таким же именем?
да.
Ответить с цитированием
  #6 (permalink)  
Старый 07.12.2023, 22:19
Новичок на форуме
Отправить личное сообщение для alrosavilla Посмотреть профиль Найти все сообщения от alrosavilla
 
Регистрация: 27.06.2023
Сообщений: 9

рони, еще один вопрос.
Я сделал вторую HTML и прикрепил к ней второй js. Затем импортировал туда функцию showTips. Но она почему-то собирает data-name с первой HTML.
Я попробовал во втором js убрать showTips и просто вставил
let elements = document.querySelectorAll('p[data-name]');
console.log(elements);
Но все равно отображаются элементы с первой HTML.
Эта такая особенность dataset или я что-то мог неправильно сделать?
Ответить с цитированием
  #7 (permalink)  
Старый 07.12.2023, 23:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

alrosavilla,
не могу подсказать, недостаточно информации.
Ответить с цитированием
  #8 (permalink)  
Старый 08.12.2023, 11:42
Новичок на форуме
Отправить личное сообщение для alrosavilla Посмотреть профиль Найти все сообщения от alrosavilla
 
Регистрация: 27.06.2023
Сообщений: 9

Извнияюсь, я с gulp сборкой намудрил просто.
Сразу не понял и подумал что это может такая особенность dataset. А оказалось - это такая особенность, когда невнимательно код пишешь.
Спасибо большое.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите исправить код слайдшоу. 47rus Общие вопросы Javascript 0 20.03.2016 18:43
Ребятки помогите найти код, который отвечает за стиль z-index kyivprogs Библиотеки/Тулкиты/Фреймворки 1 08.12.2015 17:46
Помогите поправить код JavaScript на сайте karvor AJAX и COMET 1 08.02.2015 13:13
Выпадающие списки. Помогите подправить код. cardsmoney Элементы интерфейса 6 18.02.2011 16:20
Код калькулятора на JS. помогите с ошибкой! kirill.psl Общие вопросы Javascript 9 26.08.2010 11:38