Попытка использовать несколько асинхронных функций, но только одна из них показывает результат

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

Это код, который я написал.

<!DOCTYPE html>
<html>

<script src = "https://cdn.plot.ly/plotly-latest.min.js"></script>


<body>
    <div id = "myPlot" style = "width:100%;max-width:700px"></div>
    <script>
        async function getNumbers(file) {
            var result = await fetch(file)
            var text = await result.text()
            var bruh = String(text).split('\n')
            return bruh.map(a => parseFloat(a))
        }

        getNumbers('sample.txt').then(rArray => {
            console.info(rArray);
            //
            var xArray = ["A", "B"];
            var yArray = [];
            yArray.push(rArray[0]);
            yArray.push(rArray[1]);
            console.info(yArray);

            var layout = {
                title: "Test"
            };
            var data = [{
                labels: xArray,
                values: yArray,
                type: "pie"
            }];
            Plotly.newPlot("myPlot", data, layout);

        });
    </script>
    <script>
        async function getNumbers(file) {
            var result = await fetch(file)
            var text = await result.text()
            var bruh = String(text).split('\n')
            return bruh.map(a => parseFloat(a))
        }

        getNumbers('sample.txt').then(rArray => {
            console.info(rArray);
            //
            var xArray = ["A", "B"];
            var yArray = [];
            yArray.push(rArray[0]);
            yArray.push(rArray[1]);
            console.info(yArray);

            var layout = {
                title: "Test"
            };
            var data = [{
                labels: xArray,
                values: yArray,
                type: "pie"
            }];
            Plotly.newPlot("myPlot", data, layout);

        });
    </script>
</body>

</html>

Это то, что я написал, но он печатает только один график. Я не получаю то, что мне не хватает. Пожалуйста, помогите мне с этим, я делаю это для своего проекта, и я начал учиться JavaScript недавно.

Оба вызова Plotly.newPlot("myPlot", …) будут напечатаны в один и тот же элемент вывода, второй вызов перезапишет вывод первого. Используйте два элемента с разными идентификаторами.

— 25.11.2022 11:32

Кстати, не нужно переопределять функцию getNumbers с точно таким же кодом, а также не нужно размещать код в двух отдельных <script> - будет достаточно одного скрипта с обоими вызовами

— 25.11.2022 11:33

javascript function async-await file-handling

25.11.2022 11:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный