Question

抱歉，我只想问，我有一个卡路里计数器，为用户建议饮食方案，我想在用户计算BMI之后出现建议，以便他们可以点击它

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

以下是我的代码

<!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>

Answer 1

为什么不改变

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

要...

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

使用指向下一页的静态链接，还是根据您的需要通过JS动态设置？

这是一个使用代码片段的JSFiddle示例。 https://jsfiddle.net/JokerDan/chgeprsj/

Answer 2

我建议更改这些行document.getElementById("comment").innerText

到document.getElementById("comment").innerHtml，然后将您的建议文字包装在锚标记<a href=#>Underweight: Suggesting 7 days Weight Gain</a>

中

如何在我的HTML代码中点击我的链接？

2 个答案: