<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>App Title</title>
<!-- Framework's CSS Files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Our CSS Files -->
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h2>All excersise</h2>
</div>
<div data-role="main" class="ui-content">
<a href="#pageone" class="ui-btn ui-icon-plus ui-btn-icon-left">Excersise 1</a>
<a href="#pagetwo" class="ui-btn ui-icon-plus ui-btn-icon-left">Excersise 2a</a>
<a href="#pagethree" class="ui-btn ui-icon-plus ui-btn-icon-left">Excersise 2b</a>
<a href="#pagefive" class="ui-btn ui-icon-plus ui-btn-icon-left">Excersise 2c</a>
</div>
</div>
<div data-role="page" id="pageone">
<div data-role="header">
<h2>show & hide</h2>
<a href="#main">Back to home</a>
</div>
<div data-role="main" class="ui-content">
<img id="showhide" src="assets/earth.jpg" />
<a id="show" data-role="button" class="ui-btn ui-icon-plus ui-btn-icon-left" href="#">Show Image Senpai</a>
<a id="hide" data-role="button" class="ui-btn ui-icon-minus ui-btn-icon-left" href="#">Hide Image Senpai</a>
</div>
<a id="show" data-role="button" class="ui-btn ui-icon-back ui-btn-icon-left" href="#main">home</a>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h2>Calculator</h2>
<a href="#main">Back to home</a>
</div>
<div data-role="main" class="ui-content">
<form action="">
<label for="num1">Number1</label>
<input type="number" id="num1" />
<label for="num2">Number2</label>
<input type="number" id="num2" />
</form>
<a href="#" data-role="button" id="cal">Calculate senpai</a>
<input type="number" id="result" contenteditable="false" />
</div>
<a id="show" data-role="button" class="ui-btn ui-icon-back ui-btn-icon-left" href="#main">home</a>
</div>
<div data-role="page" id="pagethree">
<div data-role="header">
<h2>age</h2>
<a href="#main">Back to home</a>
</div>
<div data-role="main" class="ui-content">
<form action="">
<label for="namee">name</label>
<input type="text" id="namee" />
<label for="age">year</label>
<input type="number" id="age" />
</form>
<a href="#" data-role="button" id="cals">Calculate Age senpai</a>
<input id="ageres" />
</div>
<a id="show" data-role="button" class="ui-btn ui-icon-back ui-btn-icon-left" href="#main">home</a>
</div>
<div data-role="page" id="pagefive">
<div data-role="header">
<h1>Greetings</h1>
</div>
<div data-role="main" class="ui-content"><div>
<label for="time">Time:</label>
<input type="number" id="time" min=0 max=24>
<button id="greet">Greet</button>
<br><br>
<input type="text" id="result" readonly>
</div>
</div>
<!-- APIs js scripts --> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<!-- Our js Scripts -->
<script type="text/javascript" src="js/main.js"></script>
</body>
Hi. The code with greetings is not working when I use it with this code but when I use it separately it is working fine. when the user enters a number the input below must be filled with a greeting "good morning". Can you find where is the problem and explain to me why it is not working with the code because I have to study for an exam.