时间戳

首页 > 解决方案 > 在按钮中单击时功能未运行

javascript - 在按钮中单击时功能未运行

问题描述

如果我在外部js中键入scroll()就可以运行它，并且当我运行测试函数时，它运行没有问题，那么为什么我单击按钮时它没有运行。我正在尝试使用的功能是滚动（），submitGo（）是一个测试以查看天气它是javascript或按钮的问题，它似乎是按钮，因为我看不到任何问题，然后提交去工作正常。

<html>
<head>

</head>
<link rel="stylesheet" href="style.css">

<body>
    <div id="date" class="text"></div>

    <button id="type" class="text">First Exersize</button>
    <button id="main-text" class="text">First Exersize</button>
    
    <button id="start" onclick="scroll()" class="btn">Start</button>
    <button id="stop" class="btn">Stop</button>
</body>
<script src="code.js"></script>

var type = ['base','push','rest','push','base','push','base'];


var pushups = ['Pushups',10,20];
var sit = ['Sit-Ups',10,20];
var rus = ['Russian Twists',20,30];
var leg = ['Leg Raises',10,20];
var bic = ['Bicep Curls 6-8kg',10,20];
var tric = ['Tricep Push 10kg',20,30];
var dumb = ['Dumbell Pull Up 6-8kg',10,20];
var arm = ['Arm Raises 6kg',10,20];
var cur = ['Curl and Up n 10kg',10,20];
var plank = ['Plank','1min','1min'];

var exersize = [pushups,sit,rus,leg,bic,tric,dumb,arm,cur,plank];

var count = 0;

var d = new Date();
var day = d.getDay()-1
document.getElementById('date').innerText = days[day];
document.getElementById('type').innerText = type[day];

function scroll(){
    console.log('run')
    if(type[day]=='base'){
        document.getElementById('main-text').innerText = exersize[count][0] + ' ' + exersize[count][1];
    }else{
        document.getElementById('main-text').innerText = exersize[count][0] + ' ' + exersize[count][2];
    };

    count++;
    if(count == 10){
        count = 0
        document.getElementById('main-text').innerText = 'Press Start To Start Scrolling';
    };};
function submitGo(){ window.location = "www.google.com" };```

    body{
    display: grid;
    grid-template-columns: 22.5% 22.5% 22.5% 22.5%;
    grid-template-rows: 22.5% 22.5% 22.5% 22.5%;
    grid-gap: 2%;
    text-align: center;
    vertical-align: middle;
    background-color: rgb(179, 179, 179);

    }

    @font-face{
    font-family: Sonorous;
    src: url(D:/maaya/Downloads/Sonorous_Font/Sonorous/Lucy_rounded.otf)
    }

    .text{
    background-color: rgb(179, 179, 179);

    text-align: center;
    font-family: Sonorous;

    border: none;
    box-shadow: none;
    outline: none;
    
    }
    #main-text{
    font-size: 40px;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row: 2;
    }
 
    #date{
    font-size: 20px;
    grid-row: 1;
    grid-column: 1;
    text-align: start;
    }

    .btn{
    text-align: center;
    font-size: 25px;
    font-family: Sonorous; 

    background-color: rgb(179, 179, 179);
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 25px;
    }

    .btn:active{
    background-color: rgb(121, 121, 121);
    }

    #start{
    grid-column: 2;
    grid-row: 3;
    }
    #stop{
    grid-column: 3;
    grid-row: 3;
    }
    #type{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row: 1;
    font-size: 30px;

    }

标签： javascripthtml

解决方案

推荐阅读