抱歉，但我只想问一下，我开发了一个卡路里计数器来为用户建议饮食方案，我想让建议在用户计算 BMI 后出现，以便他们可以点击它
下面是我的代码
<!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>最佳答案
为什么不直接改变
<span id="comment"> ?</span>
致...
<a href="" id="comment"> ?</a>
使用静态链接到下一页，还是根据您的需要通过 JS 动态设置？
这是一个使用代码片段的 JSFiddle 示例。 https://jsfiddle.net/JokerDan/chgeprsj/
关于javascript - 如何使我的 html 代码中的链接可点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41592664/