JavaScript上的DOM操作实践---帮助文档

时间：2018-10-07 05:32:35

标签： javascript html dom innerhtml

我目前正在独自学习JavaScript，并试图通过一个简单的调度程序应用程序来进行DOM操作，该程序接受某种形式的信息（采用日期，名称和事件描述），然后将表单响应插入日历中对应于一天。

我基本上使用了for循环在整个日历中循环查找与表单中选择的日期相对应的日期，如果相等，则将输入值放入该日期下。

（为简单起见，暂时假设日历只能容纳2018年10月的日期。）

非常感谢您的帮助！

const dateInput = document.getElementById('date');
const nameInput = document.getElementById('who');
const remarksInput = document.getElementById('remarks');
const eventAdderButton = document.getElementById('event-adder-button');
const calendar = document.getElementsByClassName('days');

eventAdderButton.addEventListener('click', () => {
  const date = dateInput.value.slice(3,5);
  for (let i = 0; i < calendar.length; i += 1) {
    const calendardays = calendar[i].getElementsByTagName('td');

    for (let j = 0; j < calendardays.length; j += 1) {
      if (calendardays[j].textContent == date) {
        const newEvent = document.createElement('p');
        newEvent.textContent = remarksInput.value + nameInput.value;
        calendardays[j].innerHTML = "<p>" + calendardays[j] + "</p>" + newEvent.innerHTML;
      }
    }
  }
})
body {
  text-align: center;
  box-sizing: border-box;
}

h2 {
  color: inherit;
}

.intro-wrapper {
  background-color: #45d1a0;
  padding: 10px;
  margin: 10px 10px;
}



#intro {
  background-color: #45d1a0;
  color: white;
  font-family: "Chelsea Market";
  border-style: double;
  border-color: white;
  border-width: thick;
  padding: 10px;
  margin: 10px 10px;

}


.form-wrapper {
  background-color: #d15545;
  font-family: "Chelsea Market";
  padding: 10px;
  margin: 10px 10px;
}

.form-start {
  color: white;
  border-style: double;
  border-color: white;
  border-width: thick;
  padding: 10px;
  margin: 10px 10px;
}

label, #event-adder-button {
  margin-top: 20px;
}


#date, #who, #remarks {
  margin: 0 auto;
  text-align: center;
  width: 300px;
}

.calendar-wrapper {
  background-color: #03f;
  color: white;
  font-family: "Chelsea Market";
  padding: 10px;
  margin: 10px 10px;
}

ul {list-style-type: none;}

/* Month header */
.month {
    padding: 25px 25px;
    background: #1abc9c;
    text-align: center;
}

/* Month list */
.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
    float: left;
    padding-top: 10px;
}

/* Next button */
.month .next {
    float: right;
    padding-top: 10px;
}

/* calendar table */

.calendar-table {
  width: 100%;
}


/* Weekdays (Mon-Sun) */
.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color:#ddd;
    width: 100%;
}

.weekdays th {
    width: 10%;
    color: #666;
    text-align: center;
    border: solid;
}

/* Days (1-31) */
.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days td {
    width: 10%;
    height: 100px;
    margin-bottom: 5px;
    padding-top: 5px;
    font-size:12px;
    color: #777;
    border: solid;
    text-align: left;
    vertical-align: top;

}

/* Highlight the "current" day */
.days td .active {
    padding: 3px;
    background: #1abc9c;
    color: white !important
}
<!DOCTYPE HTML>
<html>

  <head>
    <title>My Calendar Application</title>
    <link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>

    <!-- Banner -->
    <div class="intro-wrapper">
      <section id="intro">
        <p></p>

        <h2>Manage your Schedule</h2>
        <p>Add. Share. And Enjoy!</p>
      </section>
    </div>

    <div class="form-wrapper">
      <section id="one">
        <div class="form-start">
          <header>
            <h2>Add an Event</h2>
          </header>
          <form method="post" action="#">
            <div>
              <label for="date">Date</label>
              <br>
              <input name="date" id="date" type="date">
            </div>
            <br>
            <div>
              <label for="who">With Whom?</label>
              <br>
              <input name="who" id="who" type="text">
            </div>
            <br>
            <div>
              <label for="remarks">Remarks</label>
              <br>
              <textarea name="remarks" id="remarks" rows="4"></textarea>
            </div>
            <input value="Add Event" type="submit" id="event-adder-button"></li>
          </form>
        </div>
      </section>
    </div>

    <!--end of Form-->

    <!-- Calendar -->
    <section class="calendar-wrapper">
      <div class="inner">
        <h2>Calendar</h2>
      </div>
      <div class="month">
        <ul>
          <li class="prev">&#10094;</li>
          <li class="next">&#10095;</li>
          <li>October<br><span style="font-size:18px">2018</span></li>
        </ul>
      </div>
      <div>
        <table class="calendar-table">
          <tr class="weekdays">
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
            <th>Su</th>
          </tr>
          <tr class="days">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
          <tr class="days">
            <td>8</td>
            <td>9</td>
            <td><span class="active">10</span></td>>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
          </tr>

          <tr class="days">
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
          </tr>
          <tr class="days">
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
          </tr>
          <tr class="days">
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
    </section>


    <script src="app.js"></script>

  </body>

</html>

1 个答案:

答案 0 :(得分：0)

您的代码中有几个问题：

  1. 您没有停止提交表单，这导致页面重置（包括表单），您需要在表单提交事件上使用preventDefault（）。
  2. 您没有正确地将当天的html元素与日期字符串进行比较，拆分功能未按预期运行，应将其更改为date.value.split('-') to get an array with [yyyy-mm-dd]`格式。
    3. li>
  3. 当天数以dd格式字符串传递时，<10天数的所有==比较都将失败（例如：02 == 2 === false），并用parseInt()进行了修正
  4. 解决上述问题后，您会将新数据追加到每天的表中，这导致使用新添加的元素修改textContent，因此所有进一步的比较将失败。 （例如：与谁？“我”，备注？“好”，日期：2018年10月2日，导致 2meOkay获取该表元素上的textContent。

下面，我提供了一个功能齐全的html页面，您可以查看该页面以获取更多详细信息：

可能更干净地剥离了css，但这对于复制测试方案最有效。 

<!DOCTYPE HTML>
<html>

<head>
    <title>My Calendar Application</title>
    <link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body {
            text-align: center;
            box-sizing: border-box;
        }

        h2 {
            color: inherit;
        }

        .intro-wrapper {
            background-color: #45d1a0;
            padding: 10px;
            margin: 10px 10px;
        }



        #intro {
            background-color: #45d1a0;
            color: white;
            font-family: "Chelsea Market";
            border-style: double;
            border-color: white;
            border-width: thick;
            padding: 10px;
            margin: 10px 10px;

        }


        .form-wrapper {
            background-color: #d15545;
            font-family: "Chelsea Market";
            padding: 10px;
            margin: 10px 10px;
        }

        .form-start {
            color: white;
            border-style: double;
            border-color: white;
            border-width: thick;
            padding: 10px;
            margin: 10px 10px;
        }

        label,
        #event-adder-button {
            margin-top: 20px;
        }


        #date,
        #who,
        #remarks {
            margin: 0 auto;
            text-align: center;
            width: 300px;
        }

        .calendar-wrapper {
            background-color: #03f;
            color: white;
            font-family: "Chelsea Market";
            padding: 10px;
            margin: 10px 10px;
        }

        ul {
            list-style-type: none;
        }

        /* Month header */

        .month {
            padding: 25px 25px;
            background: #1abc9c;
            text-align: center;
        }

        /* Month list */

        .month ul {
            margin: 0;
            padding: 0;
        }

        .month ul li {
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        /* Previous button inside month header */

        .month .prev {
            float: left;
            padding-top: 10px;
        }

        /* Next button */

        .month .next {
            float: right;
            padding-top: 10px;
        }

        /* calendar table */

        .calendar-table {
            width: 100%;
        }


        /* Weekdays (Mon-Sun) */

        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color: #ddd;
            width: 100%;
        }

        .weekdays th {
            width: 10%;
            color: #666;
            text-align: center;
            border: solid;
        }

        /* Days (1-31) */

        .days {
            padding: 10px 0;
            background: #eee;
            margin: 0;
        }

        .days td {
            width: 10%;
            height: 100px;
            margin-bottom: 5px;
            padding-top: 5px;
            font-size: 12px;
            color: #777;
            border: solid;
            text-align: left;
            vertical-align: top;

        }

        /* Highlight the "current" day */

        .days td .active {
            padding: 3px;
            background: #1abc9c;
            color: white !important
        }
    </style>
</head>

<body>

    <!-- Banner -->
    <div class="intro-wrapper">
        <section id="intro">
            <p></p>

            <h2>Manage your Schedule</h2>
            <p>Add. Share. And Enjoy!</p>
        </section>
    </div>

    <div class="form-wrapper">
        <section id="one">
            <div class="form-start">
                <header>
                    <h2>Add an Event</h2>
                </header>
                <form method="post" id="form">
                    <div>
                        <label for="date">Date</label>
                        <br>
                        <input name="date" id="date" type="date">
                    </div>
                    <br>
                    <div>
                        <label for="who">With Whom?</label>
                        <br>
                        <input name="who" id="who" type="text">
                    </div>
                    <br>
                    <div>
                        <label for="remarks">Remarks</label>
                        <br>
                        <textarea name="remarks" id="remarks" rows="4"></textarea>
                    </div>
                    <input value="Add Event" type="submit" id="event-adder-button">
                    </li>
                </form>
            </div>
        </section>
    </div>

    <!--end of Form-->

    <!-- Calendar -->
    <section class="calendar-wrapper">
        <div class="inner">
            <h2>Calendar</h2>
        </div>
        <div class="month">
            <ul>
                <li class="prev">&#10094;</li>
                <li class="next">&#10095;</li>
                <li>October
                    <br>
                    <span style="font-size:18px">2018</span>
                </li>
            </ul>
        </div>
        <div>
            <table class="calendar-table">
                <tr class="weekdays">
                    <th>Mo</th>
                    <th>Tu</th>
                    <th>We</th>
                    <th>Th</th>
                    <th>Fr</th>
                    <th>Sa</th>
                    <th>Su</th>
                </tr>
                <tr class="days">
                    <td><span class="dayNumber">1</span></td>
                    <td><span class="dayNumber">2</span></td>
                    <td><span class="dayNumber">3</span></td>
                    <td><span class="dayNumber">4</span></td>
                    <td><span class="dayNumber">5</span></td>
                    <td><span class="dayNumber">6</span></td>
                    <td><span class="dayNumber">7</span></td>
                </tr>
                <tr class="days">
                    <td><span class="dayNumber">8</span></td>
                    <td><span class="dayNumber">9</span></td>
                    <td><span class="dayNumber active">
                        10
                    </span></td>
                    <td><span class="dayNumber">11</span></td>
                    <td><span class="dayNumber">12</span></td>
                    <td><span class="dayNumber">13</span></td>
                    <td><span class="dayNumber">14</span></td>
                </tr>

                <tr class="days">
                    <td><span class="dayNumber">15</span></td>
                    <td><span class="dayNumber">16</span></td>
                    <td><span class="dayNumber">17</span></td>
                    <td><span class="dayNumber">18</span></td>
                    <td><span class="dayNumber">19</span></td>
                    <td><span class="dayNumber">20</span></td>
                    <td><span class="dayNumber">21</span></td>
                </tr>
                <tr class="days">
                    <td><span class="dayNumber">22</span></td>
                    <td><span class="dayNumber">23</span></td>
                    <td><span class="dayNumber">24</span></td>
                    <td><span class="dayNumber">25</span></td>
                    <td><span class="dayNumber">26</span></td>
                    <td><span class="dayNumber">27</span></td>
                    <td><span class="dayNumber">28</span></td>
                </tr>
                <tr class="days">
                    <td><span class="dayNumber">29</span></td>
                    <td><span class="dayNumber">30</span></td>
                    <td><span class="dayNumber">31</span></td>
                    <td><span class="dayNumber"></span></td>
                    <td><span class="dayNumber"></span></td>
                    <td><span class="dayNumber"></span></td>
                    <td><span class="dayNumber"></span></td>
                </tr>
            </table>
        </div>
    </section>

    <script>
        const dateInput = document.getElementById('date');
        const nameInput = document.getElementById('who');
        const remarksInput = document.getElementById('remarks');
        const eventAdderButton = document.getElementById('event-adder-button');
        const calendar = document.getElementsByClassName('days');

        eventAdderButton.addEventListener('click', () => {
            const date = dateInput.value.split('-'); // Split date string
            // Parse as string so == works for string to number;
            const year = parseInt(date[0]);
            const month = parseInt(date[1]);
            const day = parseInt(date[2]);
            console.log('Adder clicked: ', date);
            console.log('Adder day: ', day);
            console.log('Calendar Days: ', calendar);
            for (let i = 0; i < calendar.length; i++) {
                const calendardays = calendar[i].getElementsByTagName('td');
                for (let j = 0; j < calendardays.length; j++) {
                    const dayNumber = calendardays[j].getElementsByClassName('dayNumber'); 
                    // DayNumber is an array with single element from span.dayNumber, 
                    // >  this keeps the day comparison easy and consistent.
                    if (dayNumber[0].textContent == day) {
                        const newEvent = document.createElement('p');
                        newEvent.textContent = `${remarksInput.value}:  ${nameInput.value}`;
                        // > Changed the below line, kept it as reference.
                        // calendardays[j].innerHTML = "<p>" + calendardays[j] + "</p>" + newEvent.innerHTML;
                        calendardays[j].appendChild(newEvent);
                    }
                }
            }
        })

        const form = document.getElementById("form");
        form.addEventListener("submit", formSubmitted, true);
        // Prevent the form from submitting!
        function formSubmitted(e) {
            console.log('formSubmitted! ', e);
            e.preventDefault()
        }
    </script>
</body>

</html>

结果 该活动已添加到日历 enter image description here

注意： 抱歉，您尚未发布摘要，目前还不能执行... :)

相关问题
最新问题