Question

我希望在单击标签时执行一个javascript函数，该函数将返回单击的确切时间，包括小时，分钟和秒。我有一个可以执行我想要的功能的javascript函数，但是当我单击标签时，什么都没有出现。我在做错什么吗？

function getTime() {
    const timeNow = new Date();
    const hours = timeNow.getHours();
    const minutes = timeNow.getMinutes();
    const seconds = timeNow.getSeconds();
    let timeString = '' + ((hours > 24) ? hours - 12 : hours);
    timeString += ((minutes < 10) ? ":0" : ":") + minutes;
    timeString += ((seconds < 10) ? ":0" : ":") + seconds;
    timeString += (hours >= 12) ? "" : "";
    return timeString;
}

const hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">Date</span>
    <input class="input100" onclick="getTime()" id="hours" name="Date" placeholder="Date">
    <span class="focus-input100"></span>
</div>

Answer 1

<input>元素没有textContent，应更改value。将onclick事件设置为另一个function，这将在每个事件上更改value点击。

您还可以在getTime()中添加以下行以摆脱其他changeTime()

hoursSpan.textContent = getTime();

const hoursSpan = document.getElementById('hours');
function getTime() {
        const timeNow = new Date();
        const hours = timeNow.getHours();
        const minutes = timeNow.getMinutes();
        const seconds = timeNow.getSeconds();
        let timeString = '' + ((hours > 24) ? hours - 12 : hours);
        timeString += ((minutes < 10) ? ":0" : ":") + minutes;
        timeString += ((seconds < 10) ? ":0" : ":") + seconds;
        timeString += (hours >= 12) ? "" : "";
        return timeString;
    }

function changeTime(){
  hoursSpan.value = getTime();
}

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">Date</span>
    <input class="input100" onclick="changeTime()" id="hours" name="Date" placeholder="Date">
    <span class="focus-input100"></span>
 </div>

Answer 2

HTML：

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">Date</span>
    <!-- this reference is passed to the called function -->
    <input class="input100" onclick="getTime(this)" id="hours" name="Date" placeholder="Date">
    <span class="focus-input100"></span>
 </div>

JavaScript ：（将时间字符串分配给输入字段的value属性而不是textContext属性）

<script language="JavaScript">

    function getTime(self) {
        const timeNow = new Date();
        const hours = timeNow.getHours();
        const minutes = timeNow.getMinutes();
        const seconds = timeNow.getSeconds();
        let timeString = '' + ((hours > 24) ? hours - 12 : hours);
        timeString += ((minutes < 10) ? ":0" : ":") + minutes;
        timeString += ((seconds < 10) ? ":0" : ":") + seconds;
        timeString += (hours >= 12) ? "" : "";
        // Assign timeString to value property
        self.value = timeString;
    }

</script>

Answer 3

只需将时间显示也放入getTime函数中

function getTime() {
     const timeNow = new Date();
     const hours = timeNow.getHours();
     const minutes = timeNow.getMinutes();
     const seconds = timeNow.getSeconds();
     let timeString = '' + ((hours > 24) ? hours - 12 : hours);
     timeString += ((minutes < 10) ? ":0" : ":") + minutes;
     timeString += ((seconds < 10) ? ":0" : ":") + seconds;
     timeString += (hours >= 12) ? "" : "";


     const hoursSpan = document.getElementById('hours');
     hoursSpan.textContent = timeString;
 }

Answer 4

我想说的最可能的问题是，您在香草JS中使用const作为变量声明符。您的浏览器可能不知道如何正确处理它，因此它会中断。使用Babel进行编译时，您的代码online here (CodePen)正常工作。也许将您的代码更改为：

function getTime() {
    var timeNow = new Date();
    var hours = timeNow.getHours();
    var minutes = timeNow.getMinutes();
    var seconds = timeNow.getSeconds();
    var timeString = '' + ((hours > 24) ? hours - 12 : hours);
    timeString += ((minutes < 10) ? ":0" : ":") + minutes;
    timeString += ((seconds < 10) ? ":0" : ":") + seconds;
    timeString += (hours >= 12) ? "" : "";
    return timeString;
}

var hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

在getTime之外放置document.getElementById并不是问题。

编辑

我没有意识到您正在设置输入的值，只需更改：

const hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

收件人：

const hoursSpan = document.getElementById('hours');
hoursSpan.value = getTime();

但是，我想补充一下，如果您要使用Let / Const声明，建议您使用Babel之类的代码进行编译，以使其在浏览器中均可使用。

Answer 5

您需要使用value而不是textContent

function getTime() {
  const timeNow = new Date();
  const hours = timeNow.getHours();
  const minutes = timeNow.getMinutes();
  const seconds = timeNow.getSeconds();
  let timeString = '' + ((hours > 24) ? hours - 12 : hours);
  timeString += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString += (hours >= 12) ? "" : "";
  let hoursSpan = document.getElementById('hoursCon');
  hoursSpan.value = timeString;
  return timeString;
}

<div class="wrap-input100 rs1-wrap-input100 validate-input">
  <span class="label-input100">Date</span>
  <input class="input100" onclick="getTime()" id="hoursCon" name="Date" placeholder="Date">
  <span class="focus-input100"></span>
</div>

带有时间的html / javascript onclick函数

5 个答案: