Блог

В настоящее время я заканчиваю курс веб-разработки, и на этой неделе мы рассмотрим: Добавление Javascript на ваш веб-сайт. Скрипты легко добавлять, и я заставил все работать, однако назначение скрипта и сайта не совпадают. Одна из задач — добавить кнопку и нажать один раз — отображаются время и данные. Я получаю намерение здесь продемонстрировать, что вы можете добавлять эти элементы на страницу, но для меня это не имеет смысла. Итак, я хочу добавить дату и время таким образом, чтобы это соответствовало цели моего сайта, который содержит информацию о COVID. Следовательно, то, что я собираю, — это кнопка, при нажатии на которую будут отображаться дата и время (по мере необходимости), а также отображение встроенной карты из нашего мира в данных. Это будет соответствовать требованиям к назначению и иметь логическую цель для отображения времени / даты вместе с обновлением информации о COVID.

Теперь я выясняю, что тег div не может иметь двух идентификаторов и что функция не может иметь более одного элемента. Однако должен быть способ, которым кнопка может отображать две вещи при нажатии — верно?

Итак, после двух дней работы над этим — вот где я нахожусь, и любые предложения, которые у вас могут возникнуть, более чем приветствуются. Помните, я учусь здесь по ходу дела, и в настоящее время у меня нет никакого образования в Javascript.

Где я нахожусь с двумя отдельными кнопками:

 <div class="row">
    <div class="header">
        <h1>Covid Status</h1><br>           
        <p>The following Button will display what the current COVID Status is around the world, according to Our World In Data.</p><br>
        <div id="Covid_stat"></div>
        <input type="button" value="Show Chart" onClick="covid();">
        <div id="Time"></div>
        <input type="button" value="Show Time" onClick="time();">
    </div>
</div>

<script>
function Time() {
    document.getElementById('time').innerHTML = Date();
}
function Covid_stat(){
    document.getElementById('covid').innerHTML='<embed src="https://ourworldindata.org/grapher/positive-rate-daily-smoothed?year=latestamp;time=earliest..latest" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></embed>';
}
</script>
  

Что я пытаюсь сделать с помощью различных онлайн-примеров:

 <div class="row">
    <div class="header">
        <h1>Covid Status</h1><br>           
        <p>The following Button will display what the current COVID Status is around the world, according to Our World In Data.</p><br>
        <button type="button" id="Show_Info">Show Information</button>
    </div>
</div>

<script>
function Time() {
    document.getElementById('time').innerHTML = Date();
}
function Covid_stat(){
    document.getElementById('covid').innerHTML='<embed src="https://ourworldindata.org/grapher/positive-rate-daily-smoothed?year=latestamp;time=earliest..latest" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></embed>';
}
var showbtn = document.getElementById("Show_Info");
showbtn.addEventListener("click", Time);
showbtn.addEventListener("click", Covid_stat);
</script>
  

Заранее большое вам спасибо!

Надеюсь, я был полезен.

         function myFunc() {
            document.getElementById('time').innerHTML = Date();
            document.getElementById('covid').innerHTML = '<iframe src="https://ourworldindata.org/grapher/positive-rate-daily-smoothed?year=latestamp;time=earliest..latest" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></iframe>';
        }

        var showbtn = document.getElementById("Show_Info");
        showbtn.addEventListener("click", myFunc);  

     <div class="row">
        <div class="header">
            <h1>Covid Status</h1><br>
            <p>The following Button will display what the current COVID Status is around the world, according to Our
                World In Data.</p><br>
            <button type="button" id="Show_Info">Show Information</button>
        </div>
        <div id="time"></div>
        <div id="covid"></div>
    </div>  

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