Мой код не показывает дату и время, как мне заставить его работать? Кроме того, я могу нажать кнопку еще раз, чтобы скрыть / показать дату и время - PullRequest
Новая
       1

Мой код не показывает дату и время, как мне заставить его работать? Кроме того, я могу нажать кнопку еще раз, чтобы скрыть / показать дату и время

0 голосов
/ 29 марта 2019

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

Я пробовал:

HTML: 

<div id="al">
   <button id="btnTimeDate" type="button">Time & Date</button>

   <p id="timeDate"></p>
</div>

JavaScript: 

document.getElementById("btnTimeDate").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("timeDate").innerHTML = Date.();
}

Но когда я нажимаю, это делаетне работает.

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

HTML 

<button type="button" onclick="document.getElementById('date_time_button').innerHTML = Date()"> Click and see Date and Time.</button>

<p id="date_time_button"></p>

Ответы [ 7 ]

2 голосов
/ 29 марта 2019

В вашем коде JavaScript есть синтаксическая ошибка. Если вы удалите. в день.(); это должно работать.

Обновление: я завернул образец кода фрагментом кода, чтобы вы могли сами его запустить. Если ваш код не работает, то вы можете проверить, обращаетесь ли вы к странице напрямую через файловую систему в вашем браузере, или она находится на сервере типа http://example.com/sample-page.html или http://localhost/sample-page.html

Иногда JavaScript может быть ограничен, если он не приходит с сервера. Или, возможно, вы не обновили кеш вашего браузера перед повторным тестированием. Это может привести к тому, что JavaScript не будет загружен, если он не встроен непосредственно в HTML-код той же страницы, а связан с внешним файлом .js. 

var clickState = 0;
document.getElementById("btnTimeDate").onclick = function(){
  if (clickState == 0) {
    document.getElementById("timeDate").innerHTML = Date();
    clickState = 1;
  } else {
    document.getElementById("timeDate").innerHTML = "";
    clickState = 0;
  }
}
<button id="btnTimeDate">Get Date</button>
<div id="timeDate"></div>
Примечание: я заметил небольшую синтаксическую ошибку в первой строке JavaScript выше. Функции следует вызывать с добавлением () после их имен, однако они работали без них, когда я также включил инструмент сниппета. Но на всякий случай я исправил эту ошибку. Извините, что пропустил это раньше. Этот блок кода мог также сразу же сработать, не дожидаясь события click, поэтому я отредактировал его таким образом, чтобы полностью инкапсулировать код внутри функции события onclick, прикрепленной к идентификатору элемента DOM. Так что теперь это должно работать независимо.

Другим решением может быть включение этой функции при нажатии кнопки даже в пределах HTML, например: 

var clickState = 0;
function displayDate() {
  if (clickState == 0) {
    document.getElementById("timeDate").innerHTML = Date();
    clickState = 1;
  } else {
    document.getElementById("timeDate").innerHTML = "";
    clickState = 0;
  }
}
<button id="btnTimeDate" onclick="displayDate()">Get Date</button>
<div id="timeDate"></div>

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

var dateDiv = document.getElementById("timeDate");
dateDiv.innerHTML = Date();
dateDiv.style.visibility = 'hidden';
document.getElementById("btnTimeDate").onclick = function(){
  if (dateDiv.style.visibility == 'hidden') {
    dateDiv.style.visibility = 'visible';
  } else {
    dateDiv.style.visibility = 'hidden';
  }
}
<button id="btnTimeDate">Show/Hide Date</button>
<div id="timeDate"></div>
1 голос
/ 29 марта 2019

Попробуйте это: 

<html>
<head>
    <script>
        function loadFunction()
        {
            document.getElementById("timeDate").style.display = "none";
        }

        function displayDate() {
            var dateField;

            dateField = document.getElementById("timeDate");

            dateField.innerHTML = Date();

            dateField.style.display = (dateField.style.display == "")?"none":"";
        }
    </script>
</head>
<body onload="loadFunction();">
    <div id="al">
        <button id="btnTimeDate" type="button" onclick="displayDate();">Time & Date</button>
        <p id="timeDate"></p>
    </div>
</body>
</html>
1 голос
/ 29 марта 2019

Есть несколько способов решить вашу проблему.Но более простой и быстрый способ - изменить функцию displayDate следующим образом: 

document.getElementById("btnTimeDate").addEventListener("click", displayDate);

function displayDate() {
  if(document.getElementById("timeDate").innerHTML=="")
  {
    document.getElementById("timeDate").innerHTML = Date();
  }
  else
  {
    document.getElementById("timeDate").innerHTML = "";
  }
}

Также обратите внимание, что в вашем текущем коде есть синтаксическая ошибка.Удалить "." в "Date.()"

РЕДАКТИРОВАТЬ: ожидаемая функциональность JSFIDDLE

0 голосов
/ 29 марта 2019

Можете ли вы написать следующий код: 

    <html>
       <head>
          <title>(Type a title for your page here)</title>
          <script type="text/javascript"> 
              function show_now() { 
              var myDiv = document.getElementById("date_time_button")
              var my_time = new Date();
              if (myDiv.style.display === "block"){
                 myDiv.style.display = "none";    
              }else{            
                myDiv.style.display = "block";
                myDiv.innerHTML= my_time
             }
          }
      </script>
      </head>
      <body>

        <input type=button value="Show Time" onclick="show_now();">
        <p id="date_time_button"></p>

     </body>

   </html>
0 голосов
/ 29 марта 2019

Можете ли вы написать следующий код: 

    <html>
       <head>
          <title>(Type a title for your page here)</title>
          <script type="text/javascript"> 
             function show_now() { 
             var my_time = new Date();
             alert(my_time); 
           }
          </script>
      </head>
      <body>
         <input type=button value="Show Time" onclick="show_now();">
      </body>
  </html>

Надеюсь, это поможет вам. Спасибо.

0 голосов
/ 29 марта 2019

Вы должны заключить свой код JavaScript внутри, 

window.onload = () => {
    // your javascript
};

То есть 

window.onload = () => {
    document.getElementById("btnTimeDate").addEventListener("click", displayDate);

    function displayDate() {
        document.getElementById("timeDate").innerHTML = Date();
    }
};

Ваш сценарий выполняется до того, как купол будет готов!

Вот реализация плунжера https://plnkr.co/edit/xue9l0wiriGitM8Tuz6c?p=preview

0 голосов
/ 29 марта 2019

Вам нужно слово {новый}

var d = new Date (); document.getElementById ("demo"). innerHTML = d;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...