How to make my links clickable in my html code?

Question

sorry but I just have to ask, I have a calorie counter developed to suggest diet regimes for user, I want to make the suggestion appear on after user compute the BMI so that they can clicks on it

for example, I can click on the suggestion in red sentences in the picture so it will link to my next html page

Below is my code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Diet Suggestion </title>
	<!-- BOOTSTRAP STYLES-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
     <!-- FONTAWESOME STYLES-->
   <link href="assets/css/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
    <link href="assets/css/custom.css" rel="stylesheet" />
     <!-- GOOGLE FONTS-->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
   
   
   
   <style>
 body {
        background-image: url("background.jpg ");
} 
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>



  <tr>
    <td>
		

				<div class="main_view"   style="color:#FFF;text-align:center">
							<a href="#" target="_blank">
							<center> <img src="banner.jpg"  style="width:100%; height:160px;" alt="satisfaction_2015" border="none"  </center> </a>
					
				</div>
        
			
	</td>
   </tr>
    



        </nav>   
           <!-- /. NAV TOP  -->
                <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
				<li class="text-center">
                    <img src="assets/img/find_user.png" class="user-image img-responsive"/>
					</li>
				
					
                    <li>
                        <a  href="index.html"><i class="fa fa-dashboard fa-3x"></i> Home</a>
                    </li>
				    <li>
                        <a  href="diet_suggest.html"><i class="fa fa-qrcode fa-3x"></i>Diet Suggestion </a>
                    </li>
					<li>
                        <a  href="today.html"><i class="fa fa-qrcode fa-3x"></i>Today's Menu </a>
                    </li>
                      <li>
                        <a  href="exercise.html"><i class="fa fa-desktop fa-3x"></i>Your Exercise </a>
                    </li>
                    <li>
                        <a  href="calorie_counter.html"><i class="fa fa-desktop fa-3x"></i>Calorie Counter</a>
                    </li>
                    <li>
                        <a  href="sugar.html"><i class="fa fa-desktop fa-3x"></i>Sugar Counter</a>
                    </li>
					<li>
                        <a  href="food_list.php"><i class="fa fa-desktop fa-3x"></i>Malaysian's Food Calories</a>
                    </li>			
					<li  >
                        <a  href="logoutproc.php"><i class="fa fa-square-o fa-3x"></i>Logout</a>
                    </li>	
					                   
               
           
                    
              
            </div>
            
        </nav>  
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper" >
            <div id="page-inner">
                <div class="row">
                    <div class="col-md-35">
		<body bgcolor="#b5dcb3">
		
		
 <p align="right"><iframe scrolling="no" frameborder="no" clocktype="html5" 

style="overflow:hidden;border:0;margin:0;padding:0;width:240px;height:25px;"src="http://www.clocklink.com/html5embed.php?

clock=018&timezone=local&color=blue&size=240&Title=&Message=&Target=&From=2016,1,1,0,0,0&DateFormat=yyyy / mm / dd DDD&TimeFormat=hh:mm:ss 

TT&Color=blue"></iframe> </p>


<font  face="Lucida Calligraphy" size="6" ><b><h4><marquee behavior="scroll" direction="left">

<script>

/*
RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
For this script, visit http://www.javascriptkit.com
*/

// ********** MAKE YOUR CHANGES HERE

var text="Shake it Off" // YOUR TEXT
var speed=50 // SPEED OF FADE

// ********** LEAVE THE NEXT BIT ALONE!


if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()

</script>
</b></marquee></font><br>
                  
                            </div>
                </div>
                 <!-- /. ROW  -->
                 <hr />
<title>BMI Calculator </title>
<script type="text/javascript">
    function computeBMI()
    {
        //Obtain user inputs
        var height=Number(document.getElementById("height").value);
        var heightunits=document.getElementById("heightunits").value;
        var weight=Number(document.getElementById("weight").value);
        var weightunits=document.getElementById("weightunits").value;


        //Convert all units to metric
        if (heightunits=="inches") height/=39.3700787;
        if (weightunits=="lb") weight/=2.20462;

        //Perform calculation
        var BMI=weight/Math.pow(height,2);

        //Display result of calculation
        document.getElementById("output").innerText=Math.round(BMI*100)/100;

        var output =  Math.round(BMI*100)/100
        if (output<18.5)
        document.getElementById("comment").innerText = "Underweight: Suggesting 7 days Weight Gain";
      else   if (output>=18.5 && output<=25)
        document.getElementById("comment").innerText = "Normal: Suggesting Macrobiotic Diet";
     else   if (output>=25 && output<=30)
        document.getElementById("comment").innerText = "Obese: Suggesting Low Carbs Diet";
     else   if (output>30)
        document.getElementById("comment").innerText = "Overweight: Suggesting Grapefruit Diet";
       // document.getElementById("answer").value = output;	   
    }
 </script>
 <body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height: <input type="text" id="height"/>
    <select type="multiple" id="heightunits">
        <option value="metres" selected="selected">metres</option>
        <option value="inches">inches</option>
    </select>
     </p>
<p>Enter your weight: <input type="text" id="weight"/>
    <select type="multiple" id="weightunits">
        <option value="kg" selected="selected">kilograms</option>
        <option value="lb">pounds</option>
    </select>
</p>
<input type="submit" value="computeBMI" onclick="computeBMI();">
<h1>Your BMI is: <span id="output">?</span></h1>

<h2>This means you are: <span id="comment"> ?</span> </h2>
<br>
<br>
  
 </div>

 </body>
	</div>
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
        </div>
     <!-- /. WRAPPER  -->
    <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
    <!-- JQUERY SCRIPTS -->
    <script src="assets/js/jquery-1.10.2.js"></script>
      <!-- BOOTSTRAP SCRIPTS -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- METISMENU SCRIPTS -->
    <script src="assets/js/jquery.metisMenu.js"></script>
      <!-- CUSTOM SCRIPTS -->
    <script src="assets/js/custom.js"></script>
    

<div id="disclaimer">


<div id="hiaskaki" style="padding:5px 3px;;color:#FFF;text-align:center;font-size:12px;"  >

</div><!--disclaimer-->
 
</div><!--main2-->

</div><!--div4all-->

</body>
</html>

Dan_ · Accepted Answer · 2017-01-11 15:20:01Z

4

Why not just change

<span id="comment"> ?</span>

To...

<a href="" id="comment"> ?</a>

With a static link to the next page, or dynamically set via JS based on your needs?

Here is a JSFiddle example using snippets of your code. https://jsfiddle.net/JokerDan/chgeprsj/

edited Jan 11, 2017 at 15:20

answered Jan 11, 2017 at 13:50

Dan_

1,24511 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

WanHazyan Over a year ago

Thank you, will try out your suggestion indeed

Dan_ Over a year ago

If it is dynamically set links you can do it via JS in the same place you set the inner text. Just bracket your IF statements and run the text and href setting in each appropriate block :)

WanHazyan Over a year ago

Sorry, but I try to use your suggestion, but my BMI won't compute

Dan_ Over a year ago

@WanHazyan I added a JSFiddle to the answer, some adjustments for readability as I wrote it but it seems to work fine to me.

WanHazyan Over a year ago

sorry. Working fine now. Thank you for your help!

Paul Stoner · Accepted Answer · 2017-01-11 13:55:59Z

0

I suggest changing these lines document.getElementById("comment").innerText

to document.getElementById("comment").innerHtml and then wrapping your suggestion text in an anchor tag <a href=#>Underweight: Suggesting 7 days Weight Gain</a>

answered Jan 11, 2017 at 13:55

Paul Stoner

1,5501 gold badge30 silver badges53 bronze badges

1 Comment

WanHazyan Over a year ago

Ah, I see. Thank you very much. This is very helpful indeed!

Collectives™ on Stack Overflow

How to make my links clickable in my html code?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related