- Objective: - Breadcrumb: # 概念阐释 # 实例 # 相关内容 # 问题  1. 如何用JS写html页面？ ```js const companies = getCompanies(); const roles = getRoles(); // Create input buttons for every company and role represented in the data.调用renderInputButtons函数，labels等于调用的getCompanies();getRoles();数组，呈现所有选项；groupName是Select a 后面的变量；用DOM创建HTML。 renderInputButtons(companies, 'company'); renderInputButtons(roles, 'role'); // This function will create a new <section> with radio.用DOM API写一个HTML页面代码，其中的内容全部可替换，就不用逐行写HTML代码了 // inputs based on the data provided in the labels array. function renderInputButtons(labels, groupName) { //创建新元素，section元素 const container = document.createElement('section'); //使用setAttribute方法将一个名为'id'的属性添加到一个名为'container'的元素中。<section id=''> groupName输入的是id的值，比如id="companyInputs"或者id="roleInputs" container.setAttribute('id', `${groupName}Inputs`); //创建H3标题，内容的名称是groupName，company或role let header = document.createElement('h3'); header.innerText = `Select a ${groupName}`; //将header嵌入到container的首位<container id=""><h3></h3><container> container.appendChild(header); labels.forEach(label => { // For each label...遍历company和role的每个值的HTML代码；.option属性在CSS中渲染； // Create the radio input element.创建圆形按钮<div class="option"><input type='radio' name='company 或者role' value='每个数组值'></div> let divElement = document.createElement('div'); divElement.setAttribute('class', 'option'); //input标签中的属性，属性1是单选按钮“radio”；属性2是groupname，公司或角色；属性3是company和role的数组值； let inputElement = document.createElement('input'); inputElement.setAttribute('type', 'radio'); inputElement.setAttribute('name', groupName); inputElement.setAttribute('value', label); //将input嵌入div元素 divElement.appendChild(inputElement); // Create a label for that radio input element.创建在input按钮后面添加label标签，展示company和role的数组名称。并将label标签嵌入到div元素中。 let labelElement = document.createElement('label'); labelElement.setAttribute('for', label); labelElement.innerText = label; divElement.appendChild(labelElement); // Update the results when the input is selected.添加事件监听，当点击按钮，执行updateResults函数； inputElement.addEventListener('click', updateResults); //将div元素嵌入container（section元素） container.appendChild(divElement); }); //将以上所有，包含在section元素中的内容嵌入到main元素最前面； document.querySelector('main').prepend(container); } ``` # 问题答案 其他问题，阅读原文件的代码 ```html <main> <section id='companyInputs'> <h3>Select a company</h3> <div class='option'> <input type='radio' name='company' value='company1' id='company1'> <label for='company1'>company1</label> </div> <div class='option'> <input type='radio' name='company' value='company2' id='company2'> <label for='company2'>company2</label> </div> <!-- And so on for each company... --> </section> <section id='roleInputs'> <h3>Select a role</h3> <div class='option'> <input type='radio' name='role' value='role1' id='role1'> <label for='role1'>role1</label> </div> <div class='option'> <input type='radio' name='role' value='role2' id='role2'> <label for='role2'>role2</label> </div> <!-- And so on for each role... --> </section> <!-- Other elements of main... --> </main> ``` ```js //问题10 export const formatNumber = number => { // Get rid of the decimals and convert to a string. 去除小数点后的数字变为整数，然后将结果改为字符串类型String let numStr = String(Math.floor(number)); // Starting 3 from the end, add a comma every 3 digits.假设有12位数字，从末尾往回数3个加一个撇，6-3=3，不能等于0 for (let i = numStr.length - 3; i > 0; i -= 3) { //slice（0，i）显示123456，slice（i）显示i到最后一个字符 numStr = numStr.slice(0, i) + ',' + numStr.slice(i); } // And return! return numStr; } ``` # 参考资料 - [codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-javascript-syntax-part-iii/modules/wdcp-22-learn-javascript-syntax-modules-7ac62a4b-087e-4517-9b13-cc0e94b8495d/projects/es6-modules-workaround) - **问题1**:将4个函数以命名的方式导出 - **问题1**:将数组对象以默认的方式导出 在main.js文件中，`renderInputButtons(companies, 'company');`,`renderInputButtons(roles, 'role');`表示调用`renderInputButtons()`函数2次，companies和roles回调了salaryData.js中的数组。 - **问题2**:导入`getRoles()` and `getCompanies()` functions from salaryData.js到main.js - **问题3**: 导入 getRoles and getCompanies from salaryData.js.并将函数作为变量companies、roles的变量值。 - **问题4**: 在html文件的`<script>`标签中添加type - **问题5**：将salaryData.js中的`getDataByRole()` and `getDataByCompany()`、`salaryData`导入到workAroundModule.js，注意路径； - **问题6**：将导入的函数对应到相应的`[]`位置； - **问题7**：导出workAroundModule.js中的4个函数； - **问题8**: 在main.js中导入，注意路径； - **问题9**：`main.js`最后的`updateResult()`,每当用户选择单选框输入元素之一时，都会调用此函数。 - **问题10**：将数字做成规范化金额数值