@seven_8959
Пытаюсь выучить js

Как реализовать отображение курса по клику?

Всем добрый вечер. Нужна помощь. Есть как бы виджет курса валют, но высвечиваются все сразу. Хотелось бы, что бы каждая валютная пара, появлялась по клику на кнопку. При загрузке страницы, Должна сразу появляться первая валютная пара, а ниже 4 кнопки. И соответственно, когда нажимаешь на другую кнопку, виджет перерисовывается. Ниже кот js, и разметка HTML. То, что у меня не получается находится в loadCourse()
Заранее всем спасибо.

class CoursView {
    constructor() {
        this.courseList = document.querySelector('#exchange_rates');
        this.courseWidget = document.querySelector('.course_widget');
    }

   
    renderCours(ccy, base_ccy, buy, sale) {
        let li = document.createElement("li");
        let currency = document.createElement("h3");
        let course = document.createElement("p");
        let courseUsd = document.querySelector('.usd');
        let courseEuro = document.querySelector('.euro');
        let courseRur = document.querySelector('.rur');
        let courseBtc = document.querySelector('.btc');
        
        currency.innerText = ccy;     
        course.innerText = `Продажа: ${(buy*1).toFixed(2)}${base_ccy} / Покупка: ${(sale*1).toFixed(2)}${base_ccy}`;

        this.courseList.append(li);
        li.append(currency, course);       
    }


    courseError(msg) {
        this.clearCourse();
        let li = document.createElement("li");
        li.innerText = `Ошибка: ${msg}`;
        this.courseList.appendChild(li);
    }


    clearCourse() {
        this.courseList.innerHTML = '';
    }
}



class CoursModel {
    constructor() {
        this.courses = [];
    }


    setCourses(courses) {
        this.courses = courses;
    }


    clear() {
        this.courses = [];
    }
}



class CoursControler {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        this.loadCourse = this.loadCourse;
    }


    handle() {
        this.loadCourse();
        setInterval(this.loadCourse, 3600000);
    }


    loadCourse = () => {
        this.model.clear();
        fetch('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5')
            .then(res => res.json())
            .then(result => {
                this.model.setCourses(result);
            })
            .catch(err => {
                console.log(err);
            })
            .finally(() => {
                this.view.clearCourse();
                if(this.model.courses.length === 0) return this.view.courseError('Нет данных');
                this.view.courseWidget.addEventListener('click', function(e) {         
                    if (e.target.className == '.usd') {
                        this.model.courses.forEach(item => this.view.renderCours(item.ccy, item.base_ccy, item.buy, item.sale)[0]);
                    }
                    else if (e.target.className =='.euro') {
                        this.model.courses.forEach(item => this.view.renderCours(item.ccy, item.base_ccy, item.buy, item.sale)[1]);
                    }
                    else if (e.target.className =='.rur') {
                        this.model.courses.forEach(item => this.view.renderCours(item.ccy, item.base_ccy, item.buy, item.sale)[2]);
                    }
                    else if (e.target.className =='.btc') {
                        this.model.courses.forEach(item => this.view.renderCours(item.ccy, item.base_ccy, item.buy, item.sale)[3]);
                    }
                })
            });
    }

}


const coursView = new CoursView();
const coursModel = new CoursModel();
const coursController = new CoursControler(coursModel, coursView);

coursController.handle();


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcvZd2PPPPz3OD3VHpl_X9xOxesl80-cU&libraries=places&callback=initMap">
    </script>
    <script defer src="googleMaps.js"></script>
    <script defer src="app.js"></script>
    <script defer src="userWeather.js"></script>
    <script defer src="course.js"></script>
</head>
    <body> 
        <div class="container">
        <h1>Погода</h1>    
        <header>
            <input type="text" class="city" placeholder="Введите город" required>
            <button type="submit" class="cityBtn">Показать</button>
        </header>
        <section class="dateNow">
            <h3 class="date"></h3>
        </section>
        <section>
            <ul id="weather"></ul>  
            <div class="block_weather">
                <ul id="user_weather">
                    <li id="current_weather">
                        <h2>Ваш город</h2>
                        <h3 id="current_city">Неизвестно</h3>
                        <div id="temperature">null</p>
                    </li>
                </ul>
            </div>
            <div class="course_widget">
                <h2>Курс валют</h2>
                <ul id="exchange_rates"></ul>
                <button class="usd">USD</button>
                <button class="euro">EURO</button>
                <button class="rur">RUR</button>
                <button class="btc">BTC</button>
            </div>
        </section> 
    </div>   
</body>
</html>
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
@dmitry-toster
1. не нужно в finally очищать список, поэтому у вас в начале не рендерилась первая валюта
2. className нужно сравнивать без точки
3. слетает ссылка на this (советую почитать эту статью)
4. finally отрефакторил, посмотрите как ваши 13 строчек сократились до 3х
5. всегда используйте строгое сравнение ===

в целом, можно еще несколько вещей улучшить (а лучше переписать с нуля), но текущий код хотя бы теперь работающий
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы