Question

我的计划是创建一个网络服务器（通过node.js），您可以在其中输入日期的建议（日期，时间，活动和发布者）以及带有可能活动的单独列表。现在的问题是，在我提交输入后以及更改输入时，Web服务器似乎在刷新自身。

我这样尝试过： <html> <body> <div class="listing"> <table id="calendar"> <tr> <th> Date </th> <th> Time </th> <th> Activity </th> <th> Proposer </th> </tr> </div> </html>

 <script>
    function updatingCalendar() {
    var datum = document.getElementById('Datum').value;
    var uhrzeit = document.getElementById('Uhrzeit').value;
    var beschaeftigung = document.getElementById('beschaeftigung').value;
    var table = document.getElementById("calendar");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = datum;          //means date
    cell2.innerHTML = uhrzeit;        //means time
    cell3.innerHTML = beschaeftigung; //means activity
    cell4.innerHTML = name;           //means mame/proposer
  } 

  var name;
  function nameToAnybody () {
    name = "Anybody";
  }
  function nameToSomebody() {
    name = "Somebody";
  }

  var activityList = 2;
  function updatingActivityList () {
    var newActivity = document.getElementById("newActivity").value;
    if (activityList === 2) {
        activityList = newActivity;
    } else {
      activityList = activityList + ", "+ newActivity;
    }
    var y = document.getElementById("activityList");
    y.innerHTML = activityList;
  }
</script>

     <div class="inputForDate">
    <form>
    Datum: <input type="date" id='Datum' name="date" value='2019-12-24'> <br>
    Uhrzeit: <input type="time" id='Uhrzeit' value='22:00'> <br>
    Besch&#228;ftigung: <br> <input type="text" id='beschaeftigung' name="activity"> <br> 
    Wer bist du? <input type="radio" name="name" value="Anybodyy" onclick="nameToAnybody()"> anybody  
    <input type="radio" name="name" value="Somebody" onclick="nameToSomebody()"> Somebody <br> <br>
    <button onclick="updatingCalendar()"> submit </button>
  </form>
</div>

<div class="listing">
  <p id="activityList"> possible activities </p>
</div>

<div class="inputForActivities">
  <h1 class="headline"> Whats missing?</h1>
  <form>
    <input type="text" placeholder="Was sollten wir mal machen?" id="newActivity"> <br> <br>
    <button onclick="updatingActivityList()"> submit </button>
  </form>
</div>

但是它仅在我注释掉第3列并且仅当我不更改输入的内容时有效。

我也尝试过：

  function creatingCalendar() {
      var table = document.getElementById("calendar");
      for (i = 0, i<names.length, i++) {
        var rows = table.insertRow(i);

        for (j = 0, j<4, j++) {
          var d = rows.insertCell(j);
          d.id= "r" + i + "c" + j;
        }}

    function updatingArrays (newEntry, array) {
      array.push(newEntry);
    }


    function newDate(){
        var newDate = document.getElementById('Datum').value;
        updatingArrays(newDate, dates);
        for (x = 0, x<dates.length, x++) {
          idCount = "r" + x + "c0";
          cell1 = document.getElementById("idCount");
          cell1.innerHTML = dates[x];
        }
      }

        function updatingCalendar() {
          creatingCalendar();
          newDate();
      }

我还尝试了一个clickCount：

      var dates = [];

      function updatingArrays (newEntry, array) {
          array.push(newEntry);
        }

        function updatingCalendar() {   
        var datum = document.getElementById('Datum').value;
        updatingArrays (datum, dates);
var uhrzeit = document.getElementById('Uhrzeit').value;
        var beschaeftigung = document.getElementById('beschaeftigung').value;
        var table = document.getElementById("calendar");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = datum[clickCount];
        cell2.innerHTML = 'uhrzeit';
        cell3.innerHTML = 'beschaeftigung';
        cell4.innerHTML = 'name';
        clickCount++;
        }

您可能会看到，我只使用了“基准”进行了尝试，而忽略了其他变更

我主要想知道为什么Web服务器正在刷新。这里-如果需要-服务器代码：

const fs = require('fs')
const port = 3000

const server = http.createServer(function(req, res) {   
  res.writeHead(200, { 'Content-Type' : 'text/html' })
  fs.readFile('../bla3.html', function(error, data) {
    if (error) {
      res.writeHead(404)
      res.write('Error: File Not Found')
    } else {
      res.write(data)
    }
    res.end()
  })
})

server.listen(port, function(error) {                 
if (error) {
  console.log('Something went wrong', error)
} else {
  console.log('Server is listening on port ' + port)
}

})

Answer 1

因为您使用的是<form>中的按钮，所以它会触发您的功能，而不是表单中的submit。为了防止这种情况，您需要添加：

    <form onsubmit="event.preventDefault();return false;">

如何仅基于html和js的同一网页上的归因更新网页

1 个答案: