模板文本在javascript中无法正常工作
我将使用.map方法返回对象的名称，并最终使用该名称填充表的innerHTML 问题是我无法让它显示适当的值 例如，对于风味杏仁神，它将有一个表行，其中包含三个表数据标记。第一个名字是“杏仁神”，第二个名字是“价格”.99”，第三个名字是链接 我的javascript如下：模板文本在javascript中无法正常工作,javascript,Javascript,我将使用.map方法返回对象的名称，并最终使用该名称填充表的innerHTML 问题是我无法让它显示适当的值 例如，对于风味杏仁神，它将有一个表行，其中包含三个表数据标记。第一个名字是“杏仁神”，第二个名字是“价格”.99”，第三个名字是链接 我的javascript如下： var Menu = { Almond_Divinity : {name: 'Almond Divinity', price: .99, history: 'x', availability: 'x'},
var Menu = {
Almond_Divinity : {name: 'Almond Divinity', price: .99, history: 'x', availability: 'x'},
Mango_Sorbet : {name: 'Mango Sorbet', price: .99, history: '', availability: ''},
Decaf : {name: 'Decaf', price: .99, history: '', availability: ''},
Almond_Chocolate_Coconut : {name: 'Almond Chocolate Coconut', price: .99, history: '', availability: ''},
Alpine_Fudge_Crunch : {name: 'Alpine Fudge Crunch', price: .99, history: '', availability: ''},
Banana_Cream_Pie : {name: 'Banana Cream Pie', price: .99, history: '', availability: ''},
Birthday_Cake : {name: 'Birthday Cake:', price: .99, history: '', availability: ''},
Black_Raspberry_Chocolate_Crunch : {name: 'Black Raspberry Chocolate Crunch', price: .99, history: '', availability: ''},
Blueberry_Cobbler : {name: 'Blueberry Cobbler', price: .99, history: '', availability: ''},
Black_Walnut : {name: 'Black Walnut', price: .99, history: '', availability: ''},
Mint_Chocolate_Chip : {name: 'Mint Chocolate Chip', price: .99, history: '', availability: ''},
Caramel_Apple : {name: 'Caramel Apple:', price: .99, history: '', availability: ''},
Almond_Divinity : {name: 'Almond Divinity', price: .99, history: '', availability: ''},
Cherries_Jubilee : {name: 'Cherries Jubilee', price: .99, history: '', availability: ''},
Tutti_Frutti : {name: 'Tutti Frutti', price: .99, history: '', availability: ''},
Artic_Roll : {name: 'Artic Roll', price: .99, history: '', availability: ''},
Dame_Blanche : {name: 'Dame Blanche', price: .99, history: '', availability: ''},
Sizzling_Brownie : {name: 'Sizzling Brownie', price: .99, history: '', availability: ''},
Choco_Taco : {name: 'Choco-Taco', price: .99, history: '', availability: ''}
};
window.onload = function () {
// calls the keys property of the Object to find Menu and it's associated properties, and then uses the sort method to compare them and sort them alphabetically
const sortedFlavors = Object.keys(Menu).sort(function(a, b) {return - (name[a] - name[b])});
document.querySelector('#icecream_flavors').innerHTML = sortedFlavors.map(function icecream_flavor(currentValue, index, array) { return '<td>${currentValue}</td><td>$.99</td><td><a href="https://en.wikipedia.org/wiki/Ice_cream">History</a></td>'}).join('')
};
var菜单={
杏仁神：{名称：'杏仁神'，价格：.99，历史：'x'，可用性：'x'}，
芒果冰糕：{名称：'芒果冰糕'，价格：.99，历史：''，可用性：'}，
无咖啡因：{name:'Decaf'，价格：.99，历史记录：''，可用性：'}，
杏仁巧克力椰子：{名称：'杏仁巧克力椰子'，价格：.99，历史：''，供货：'}，
阿尔卑斯软糖咀嚼片：{名称：'al卑斯软糖咀嚼片'，价格：.99，历史：''，可用性：'}，
香蕉奶油派：{名称：'香蕉奶油派'，价格：.99，历史：''，供应：'}，
生日蛋糕：{名称：'生日蛋糕：'，价格：.99，历史：''，可用性：'}，
黑树莓巧克力脆饼：{名称：'黑树莓巧克力脆饼'，价格：.99，历史：''，供货：'}，
蓝莓皮匠：{名称：'Blueberry Cobbler'，价格：.99，历史记录：''，可用性：'}，
黑胡桃：{名称：'黑胡桃'，价格：.99，历史：''，可用性：'}，
薄荷巧克力片：{名称：'薄荷巧克力片'，价格：.99，历史：''，供货：'}，
焦糖苹果：{名称：'焦糖苹果：'，价格：.99，历史：''，可用性：'}，
杏仁神：{名称：'杏仁神'，价格：.99，历史：''，可用性：'}，
Cherries_Jubilee:{名称：'Cherries Jubilee'，价格：.99，历史：''，可用性：'}，
Tutti_Frutti:{name:'Tutti Frutti'，价格：.99，历史记录：''，可用性：'}，
Artic_Roll:{名称：'Artic Roll'，价格：.99，历史：''，可用性：'}，
布兰奇夫人：{名称：'布兰奇夫人'，价格：.99，历史：''，可用性：'}，
嘶嘶作响的布朗尼：{名称：'嘶嘶作响的布朗尼'，价格：.99，历史：''，可用性：'}，
巧克力卷：{名称：'Choco Taco'，价格：.99，历史记录：''，可用性：'}
};
window.onload=函数（）{
//调用对象的keys属性以查找菜单及其关联属性，然后使用sort方法对它们进行比较并按字母顺序排序
const sortedFlavors=Object.keys（Menu.sort）（函数（a，b）{return-（name[a]-name[b]）；
document.querySelector（“#icecream_flavors”）.innerHTML=sortedFlavors.map（函数icecream_flavor（currentValue，index，array）{return'${currentValue}$.99'）。连接（“”）
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Betty's icecream</title>
<link rel="stylesheet" type="text/css" href="css/logo.css"/>
<link rel="stylesheet" type="text/css" href="css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="css/body.css"/>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"/>
<!-- <link rel="stylesheet" href="css/small.css" media="(max-width: 479px)" title="no title"> -->
<style type="text/css" media="screen, print">
@font-face {
font-family: "KR Sweet Tooth";
src: url("fonts/KR Sweet Tooth.ttf");
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<!-- <nav class="minus-padding">
<div class="align-left">
<ul>
<li class="nav-li-left"><a href=""> Home </a></li>
<li class="nav-li-left">Menu <a href=""></a></li>
<li class="nav-li-left">Contact <a href=""></a></li>
</ul>
</div>
<div class="align-right">
<ul>
<li class="nav-li-right">Parties</li>
<li class="nav-li-right">Cakes</li>
</ul>
</div>
</nav> -->
<nav id="nav" class="minus-padding">
<div class="align-left">
<ul>
<li class="nav-li-left"><a href="#"> Home </a></li>
<li class="nav-li-left"><a href="#menu"> Menu </a></li>
<li class="nav-li-left"><a href="#employees">Employees</a></li>
<li class="nav-li-left"><a href="" onclick="newWindow()">View Mobile</a></li>
<li class="nav-li-left"><a id="demo" href="#" >Contact</a></li>
</ul>
</div>
</nav>
<div>
<img srcset="images/food-restaurant-fruits-orange.jpg 1280w"
sizes="(min-width: 36em) 100vw,
100vw"
src="images/food-restaurant-fruits-orange.jpg"
alt="A Banana Split" />
</div>
<div class="home">
<h1>
Betty's <br> <p id="logo"> s </p> Parlor
</h1>
</div>
<div class="container">
<div class="column-left">
<div class="address">
<p class="sidebar" id="sidebar-title">
550 Ice Cream Lane
Mulberry Hollow,
Utah
84501
<br>
<br>
208-208-2080
</p>
<div class="address">
<p class="sidebar">
Put a bird on it 3 wolf moon street art synth, lumbersexual slow-carb poke live-edge brooklyn coloring book tattooed pour-over kombucha. Pitchfork sartorial marfa, tote bag pop-up hell of 90's lo-fi vape coloring book distillery fap fixie. Edison bulb chicharrones actually fanny pack, normcore salvia microdosing fixie activated charcoal direct trade food truck 3 wolf moon. Knausgaard chia copper mug cred, deep v roof party PBR&B kombucha semiotics pickled poutine man bun messenger bag. Shoreditch tbh intelligentsia hammock master cleanse banjo. Wayfarers pork belly skateboard freegan, leggings migas iPhone VHS photo booth knausgaard truffaut. Coloring book forage
</p>
</div>
</div>
</div>
<div id="menu" class="column-right fl-scroll-link">
<table class="table">
<tr>
<th id="header-modified">Flavor
</th>
<th>Price
</th>
<th>
link
</th>
</tr>
<tr id="icecream_flavors">
</tr>
<!-- <tr>
<td>
Almond Divinity
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Almond Chocolate Coconut
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Alpine Fudge Crunch
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Banana Cream Pie
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Birthday Cake
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>Decaf
</td>
<td>$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Black Raspberry Chocolate Crunch
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Blueberry Cobbler
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Black Walnut
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Mint Chocolate Chip
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Caramel Apple
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Almond Divinity
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Almond Chocolate Coconut
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Alpine Fudge Crunch
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Banana Cream Pie
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Birthday Cake
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>Decaf
</td>
<td>$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Black Raspberry Chocolate Crunch
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Blueberry Cobbler
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr> -->
</table>
</div>
<div class="empty">
<div class="row">
<h2 id="employees">Employees</h2>
</div>
</div>
<div style="width: 100%; height: 10px">
</div>
<div class="row-full">
<div class="center">
<!-- grids -->
<div class="grid">
<img class="circle" src="images/bow-tie-businessman-fashion-man.jpg" alt="boss image" />
<a href="#"><p>Meet Ben: An impulsive Vanilla lover.</p></a>
</div>
<div class="grid">
<img class="circle" src="images/man-couple-people-woman.jpg" alt="coworkers boxing" />
<a href="#"><p>Meet Dolley Madison: An argumentative mint chocolate-chipper. </p></a>
</div>
<div class="grid">
<img class="circle" src="images/pexels-photo (1).jpg" alt="man lifting weights" />
<a href="#"><p>Meet Jerry: A strawberry introvert. </p></a>
</div>
<div class="grid">
<img class="circle" src="images/pexels-photo-89524 (1).jpg" alt="little girl" />
<a href="#"><p>Meet Robert Green: A flirtatious chocolate lover. </p></a>
</div>
<div class="grid">
<img class="circle" src="images/pexels-photo-127968.jpg" alt="little girl floating" />
<a href="#"><p>Meet Nicholas Lemery: A sherbet pessimist. </p></a>
</div>
<div class="grid">
<img class="circle" src="images/pexels-photo.jpg" alt="little girl surprised"/>
<a href="#"><p>Meet H. Glasse: An aggressive Rocky Roader. </p></a>
</div>
<footer class="footer">
<div class="footer-row">
<ul id="footer-ul">
<li class="footer-li"><a href="">Franchise</a></li>
<li class="footer-li"><a href="">Jobs</a></li>
<li class="footer-li"><a href="">Inquiries</a></li>
<li class="footer-li"><a href="">Parties</a></li>
<li class="footer-li"><a href="">Adventure</a></li>
<li class="footer-li"><a href="">Coupons</a></li>
</ul>
</div>
<div class="">
<p class="footer-p">
copyright © Trrapp
</p>
</div>
</footer>
</div>
</div>
</div>
</body>
<script src="src/menu.js"
<script>
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
<script>
function newWindow() {
newwindow = window.open('https://trrapp12.github.io/ice-cream/', '', 'width=680,height=680')
function resizeWinTo() {
newwindow.resizeTo(20, 20);
newwindow.focus();
alert("inner function called")
};
resizeWinTo();
};
</script>
</html>
贝蒂冰淇淋
@字体{
字体系列：“KR甜食”；
src:url（“font/KR sweettoot.ttf”）；
}
贝蒂的客厅
放一只鸟在上面3狼月亮街艺术合成，伐木性慢碳水化合物戳活边布鲁克林着色书纹身倒在康普茶上。Pitchfork服装marfa，手提包弹出90年代地狱般的低保真鞋面彩绘书酿酒厂fap fixie。爱迪生灯泡chicharrones实际上是fanny pack，诺姆科尔鼠尾草微量剂量固定活性炭直接交易食品卡车3狼月亮。Knausgaard chia铜马克杯cred，深v形屋顶派对PBR&B康普茶符号学腌制poutine男士包子信使包。Shoreditch tbh智能吊床大师清洗班卓琴。旅行者猪肉肚滑板freegan，紧身裤migas iPhone VHS摄影棚knausgaard truffaut。彩色书饲料
风味
价格
链接
员工
您需要将字符串括在反勾号中，才能对字符串进行插值：
sortedFlavors.map(function(currentValue) {
return `<td>${currentValue}</td><td>$.99</td><td><a href="https://en.wikipedia.org/wiki/Ice_cream">History</a></td>`
}).join('')
sortedFlavors.map（功能（当前值）{
返回`${currentValue}$.99`
}).加入（“”）
另外，可以肯定的是，项目不会被排序为字符串上的减法操作，结果是NaN
您需要使用而不是单引号'
//notice that ' is replaced with `
document.querySelector('#icecream_flavors').innerHTML =
sortedFlavors.map( function icecream_flavor(currentValue, index, array) {
return `<td>${currentValue}</td><td>$.99</td><td><a href="https://en.wikipedia.org/wiki/Ice_cream">History</a></td>`
}).join('');
//注意，'被替换为`
document.querySelector（“#冰淇淋口味”）。innerHTML=
map（功能冰淇淋口味（当前值、索引、数组）{
返回`${currentValue}$.99`
}).加入（“”）；
$（文档）.ready（函数（）{
var temp=“”；
用于（菜单中的var prop）{
temp+=''+菜单[prop]。name+''+菜单[prop]。price+''+菜单[prop]。可用性+“”；
<table id="icecream_flavors"></table>
$(document).ready(function(){
var temp="";
for(var prop in Menu){
temp+="<tr><td>"+Menu[prop].name+"</td><td>"+Menu[prop].price+"</td><td>"+Menu[prop].availability+"</td></tr>";
}
$("#icecream_flavors").append(temp);
});