JavaScript 練習 - 九九乘法表

2019-05-28 PV:

Demo

JavaScript 練習 - 九九乘法表 - Demo

1. Introduction 介紹

這是六角學院的一個小挑戰，使用 JavaScript for 迴圈獲取九九乘法表所有內容。

使用 for 迴圈獲取九九成法表全部內容
不能將數字直接寫在 HTML 上，必須用 JavaScript 渲染

2. 功能

<div class="wrap">
  <div class="title">
    <div class="content">
      <div class="line"></div>
      <h1 class="mainTitle">九九乘法表</h1>
      <h2 class="secondTitle">MULTIPLICATION CHART</h2>
      <div class="line"></div>
    </div>
  </div>
</div>

這個練習，用到的是最基本的 for Loop、createElement、setAttribute 觀念。創造一個原本不在 HTML 結構裡的畫面。

使用雙迴圈獲得九九乘法表前後相乘的 2 個數字
以 Document.createElement() 方法可以依指定的標籤名稱（tagName）建立 HTML 元素，
以 Element.setAttribute()，設定元素的屬性值

var wrap = document.querySelector(".wrap");

function createChart() {
  for (i = 2; i < 10; i++) {
    const box = document.createElement("div");
    box.setAttribute("class", "box");
    wrap.appendChild(box);
    const chart = document.createElement("ul");
    chart.setAttribute("class", "chart");
    box.appendChild(chart);
    const title = document.createElement("li");
    title.textContent = i;
    title.setAttribute("class", "chart_title");
    chart.appendChild(title);
    for (let j = 1; j < 10; j++) {
      const answer = i * j;
      const list = document.createElement("li");
      list.textContent = `${i}x${j}=${answer}`;
      chart.appendChild(list);
    }
  }
}

createChart();