无法在我的js函数中使用parseInt或Number从HTML获取数值

问题描述 投票:0回答:1

因此,我正在尝试为一个朋友的项目完成此简单的html页面,目标是获取2个用户输入(分钟和秒),将其与表中已有的数据进行比较,如果输入的分钟和秒为大于表中的时间之一,它将被条目替代。我从来没有使用过js,只是做出了一些简单的提示或警告,所以我不知道该怎么做。这是html,js和CSS:

<!DOCTYPE html> 
<html> 
<head>
    <title>Table of best times</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="javascript/besttime.js"></script>
</head>

<body>
<section>
    <table>
    <tbody>
        <caption>The best times</caption>
        <tr>
            <td id="firstTimeMin">1</td>
            <td id="firstTimeSec">2</td>
        </tr>
        <tr>
            <td id="secondTimeMin">3</td>
            <td id="secondTimeSec">4</td>
        </tr>
        <tr>
            <td id="thirdTimeMin">5</td>
            <td id="thirdTimeSec">6</td>
        </tr>
    </tbody>
    </table>

    <button onclick="timeEntry()">
        Enter a new time
    </button>
</section>

</body> 
</html>
function timeEntry(){
    var min1 = Number(document.getElementById('firstTimeMin'));
    var sec1 = Number(document.getElementById('firstTimeSec'));
    var min2 = Number(document.getElementById('secondTimeMin'));
    var sec2 = Number(document.getElementById('secondTimeSec'));
    var min3 = Number(document.getElementById('thirdTimeMin'));
    var sec3 = Number(document.getElementById('thirdTimeSec'));

    var entryMin = Number(prompt('What is the time in minutes ?'));
    var newTimeMin = entryMin;
    var entrySec = Number(prompt('What is the time in seconds'));
    var newTimeSec = entrySec;

    for(var i = 0; i < 3; i++){
        if(entryMin > min1 && entrySec > sec1) {
            document.getElementById('firstTimeMin').innerHTML = newTimeMin;
            document.getElementById('firstTimeSec').innerHTML = newTimeSec;
            break;
        }else if(entryMin > min2 && entrySec > sec2) {
            document.getElementById('secondTimeMin').innerHTML = newTimeMin;
            document.getElementById('secondTimeSec').innerHTML = newTimeSec;
            break;
        }else if (entryMin > min3 && entrySec > sec3) {
            document.getElementById('thirdTimeMin').innerHTML = newTimeMin;
            document.getElementById('thirdTimeSec').innerHTML = newTimeSec;
            break;
        }
    }

}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

section {
    width: 100%;
    height: 100%;

}

table, td {
    width: 40%;
    text-align: center;
    border: 1px solid black;
    border-collapse: collapse;
}

button { 
    cursor: pointer;
    font-weight: 700;
}

[我的想法是简单地使用NumberparseInt获取表中已经存在的数据以获取数字值,但是当我尝试从html中获取元素时,无论从我做过的测试中,它告诉我我得到一个数字类型,但是当我尝试在操作中使用它时,它返回NaN。也许我只是愚蠢,但是我一直在阅读和寻找一天,以一种方式来从单元格中获取数字数据,但是除了NumberparseInt或使用表格之外,我还没有看到了一种执行此操作的方法,感觉就像我搜索的越多,对它为什么不起作用的理解就越少。关于如何完成此操作的任何帮助或线索,即使这意味着从头开始也将不胜感激。

javascript html css
1个回答
0
投票

[document.getElementById('firstTimeMin')仅获取DOM元素,您应该执行document.getElementById('firstTimeMin').innerHTML来获取HTML的内容,以便可以使用parseInt()Number来获取数字。

© www.soinside.com 2019 - 2024. All rights reserved.