我的命令提示符在单击按钮之前打开

时间:2020-03-16 11:30:40

标签: javascript

我有3个提示,第一个是输入hours,第二个是minutes,当用户单击按钮add n minutes时,我想通过建议显示第三个提示几分钟。

enter image description here

enter image description here

我的问题是我的命令提示符在单击按钮之前执行。

我的HTML

<body >
   <h1>Exercise 8</h1>
   <label>Hours : <input type="text" id='h' /></label>
   <label>Minutes : <input type="text" id='m' /></label>
   <button id="btn1">Pass 1 minute</button>
   <button id="btn2">Add n minutes</button>
   <script src="script.js"></script>
</body>

我的JS

var hours = parseInt(prompt('Enter your hours please : '));
var minutes = parseInt(prompt('Enter your minutes please : '));

var btnPassOneMinute = document.getElementById('btn1');
var btnPass_N_Minute = document.getElementById('btn2');

/*if (hours != null) {
  main();
}*/

btnPassOneMinute.addEventListener('click', addOneMinute);
btnPass_N_Minute.addEventListener('click', add_N_Minute);

main();
addOneMinute();
add_N_Minute();

function main(){

    if(minutes > 59){
        minutes = 0;
        hours += 1;
    }

    if(hours > 23){
        hours = 0;
    }

    document.getElementById('h').value = hours;
    document.getElementById('m').value = minutes;
}

function addOneMinute(){

    main();

    minutes += 1;
}

function add_N_Minute(){

    //main();
    var addMinute = parseInt(prompt('Add your minutes : '));


    minutes += addMinute; 

    if(addMinute > 59){
        minutes = 0;
    }

    if(minutes > 59){
        minutes = 0;
        hours += 1;
    }

    if(hours > 23){
        hours = 0;
    }

    document.getElementById('h').value = hours;
    document.getElementById('m').value = minutes;


}

var hours = parseInt(prompt('Enter your hours please : '));
var minutes = parseInt(prompt('Enter your minutes please : '));

var btnPassOneMinute = document.getElementById('btn1');
var btnPass_N_Minute = document.getElementById('btn2');

/*if (hours != null) {
  main();
}*/

btnPassOneMinute.addEventListener('click', addOneMinute);
btnPass_N_Minute.addEventListener('click', add_N_Minute);

main();
addOneMinute();
add_N_Minute();

function main(){

	if(minutes > 59){
		minutes = 0;
		hours += 1;
	}

	if(hours > 23){
		hours = 0;
	}

    document.getElementById('h').value = hours;
    document.getElementById('m').value = minutes;
}

function addOneMinute(){

    main();

    minutes += 1;
}

function add_N_Minute(){

	//main();
    var addMinute = parseInt(prompt('Add your minutes : '));

 
    minutes += addMinute; 

    if(addMinute > 59){
    	minutes = 0;
    }

    if(minutes > 59){
		minutes = 0;
		hours += 1;
	}

	if(hours > 23){
		hours = 0;
	}

    document.getElementById('h').value = hours;
    document.getElementById('m').value = minutes;

}
<!DOCTYPE html>
<html>
    <head>
        <title>Cours JavaScript</title>
        <meta charset="utf-8">
        <meta name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
        <link rel="stylesheet" href="cours.css">
    </head>
    
    <body >
        <h1>Exercise 8</h1>
        <label>Hours : <input type="text" id='h' /></label>
        <label>Minutes : <input type="text" id='m' /></label>
        <button id="btn1">Pass 1 minute</button>
        <button id="btn2">Add n minutes</button>
        <script src="script.js"></script>
    </body>
</html>

谢谢...

0 个答案:

没有答案
相关问题