jfiddle javascript函数无法正常工作

Question

为什么没有 this jfiddle无效？具体而言，确认和回复功能不会调用和执行。调试表明这些功能根本不存在。

错误：

  

ReferenceError：未定义回复   [了解更多]

     

ReferenceError：未定义确认   [了解更多]

我将以下代码放在javascript部分。

function reply(id) {
    var xhttp = new XMLHttpRequest();
    var id = id.slice(7)
    var user_id = id.slice(12)
    var message = $('#' + id).val()
    xhttp.open("POST", "http://127.0.0.1:5000/reply", true);
    xhttp.setRequestHeader("Content-Type","application/json");
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200 && this.statusText=='OK') {
            var json = JSON.parse(xhttp.responseText);
            $("#message"+id)
            alert("Posted")
        }
    };
    var data = JSON.stringify({"message": message, "message_user_id": user_id});
    xhttp.send(data);
}

＆＃13;

＆＃13;

$('#clickme').click(function() {
  $.ajax({
    type: 'GET',
    crossOrigin: true,
    url: 'http://127.0.0.1:5000/test/',
    success: function(data) {
      $('#output').append('<p>Here\'s what I got from the server:</p>');
      $('#output').append('<p>First name: ' + data.FirstName + '</p>');
      $('#output').append('<p>Last name: ' + data.LastName + '</p>');
      $('#output').append('<p>Age: ' + data.Age + '</p>');
      $('#output').append('<p>Gender: ' + (data.IsMale ? 'Male' : 'Female') + '</p>');
    },
    dataType: 'jsonp'
  });
});

function reply(id) {
  var xhttp = new XMLHttpRequest();
  var id = id.slice(7)
  var user_id = id.slice(12)
  var message = $('#' + id).val()
  xhttp.open("POST", "http://127.0.0.1:5000/reply", true);
  xhttp.setRequestHeader("Content-Type", "application/json");
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200 && this.statusText == 'OK') {
      var json = JSON.parse(xhttp.responseText);
      $("#message" + id)
      alert("Posted")
    }
  };
  var data = JSON.stringify({
    "message": message,
    "message_user_id": user_id
  });
  xhttp.send(data);
}

function acknowledge(id) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200 && this.statusText == 'OK') {
      document.getElementById(id).innerHTML = "Acknowledged";
      document.getElementById(id).className = "btn btn-primary disabled";
    }
  }
  xhttp.open("GET", "http://127.0.0.1:5000/acknowledge" + id, true);
  xhttp.send();
}

/* changes datetime html to work with placeholders*/
window.onload = function() {
  /* Grab all elements with a placeholder attribute */
  var element = document.querySelectorAll('[placeholder]');

  /* Loop through each found elements */
  for (var i in element) {
    /* If the element is a DOMElement and has the nodeName "INPUT" */
    if (element[i].nodeType == 1 && element[i].nodeName == "INPUT") {

      /* We change the value of the element to its placeholder attr value */
      element[i].value = element[i].getAttribute('placeholder');
      /* We change its color to a light gray */
      element[i].style.color = "#777";

      /* When the input is selected/clicked on */
      element[i].onfocus = function(event) {
        /* If the value within it is the placeholder, we clear it */
        if (this.value == this.getAttribute('placeholder')) {
          this.value = "";
          /* Setting default text color */
          this.style.color = "#000";
        };
      };

      /* We the input is left */
      element[i].onblur = function(event) {
        /* If the field is empty, we set its value to the placeholder */
        if (this.value == "") {
          this.value = this.getAttribute('placeholder');
          this.style.color = "#777";
        }
      };
    }
  }
}

＆＃13;

main img {
  /* constrain images on small screens */
  max-width: 100%;
}

#scrollable-dropdown-menu .tt-dropdown-menu {
  max-height: 150px;
  overflow-y: auto;
}


/* typeahead style fix */


/* scaffolding */


/* ----------- */


/*
html {
  overflow-y: scroll;
  *overflow-x: hidden;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.tt-menu,
.gist {
  text-align: left;
}
*/


/* base styles */


/* ----------- */


/*
html {
  font: normal normal normal 18px/1.2 "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  color: #292f33;
}


a {
  color: #03739c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

p + p {
  margin: 30px 0 0 0;
}
*/


/* site theme */


/* ---------- */


/*
.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}
*/

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  outline: none;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}


/* example specific styles */


/* ----------------------- */

#custom-templates .empty-message {
  padding: 5px 10px;
  text-align: center;
}

#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-menu {
  max-height: 150px;
  overflow-y: auto;
}

#rtl-support .tt-menu {
  text-align: right;
}


/* end typeahead style fix */

＆＃13;

<title>Message: Home</title>

<body>
  <div class="container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="/index">Message Home<span id="unseen" class="badge">2</span></a>

        </div>
        <div class="collapse navbar-collapse" id="navbar">

          <ul class="nav navbar-nav">

            <li><a href="/admin">Admin</a></li>

            <li><a href="/user/snyder">Your Profile</a></li>
            <li><a href="/logout">Logout</a></li>
          </ul>

        </div>
      </div>
    </nav>
    <main>

      <h1>Hi, snyder!</h1>




      <div class="well">
        <div>

          <p><a href="/group/4">DOW</a> posted
            <script>
              document.write(moment("2017-11-24T17:19:32 Z").fromNow());
            </script>:</p>

        </div>
        <div>

          <button type="button" id="17" class="btn btn-primary active" onClick="acknowledge(17)">Acknowledge</button>

          <strong><span id="message17">Ok</span></strong>

          <div>


            <p align="center"><u><a href="/user/snyder">snyder</a></u> <time><script>
document.write(moment("2017-11-25T19:12:56 Z").fromNow());
</script></time></p>
            <p align="center" id="post3"><strong>What is this?</strong></p>


          </div>

          <div>


            <p align="center"><u><a href="/user/snyder">snyder</a></u> <time><script>
document.write(moment("2017-11-25T19:16:33 Z").fromNow());
</script></time></p>
            <p align="center" id="post5"><strong>an ok message...</strong></p>


          </div>

        </div>
        <div>
          <input id="message_user17" autofocus placeholder="Reply" autocomplete="off" type="STRING">
          <button id="button_message_user17" class="btn-basic" onClick="reply(this.id)">Send</button>
        </div>
      </div>

      <div class="well">
        <div>

          <p><a href="/group/1">55 WG</a> posted
            <script>
              document.write(moment("2017-11-24T17:17:54 Z").fromNow());
            </script>:</p>

        </div>
        <div>

          <button type="button" id="15" class="btn btn-primary active" onClick="acknowledge(15)">Acknowledge</button>

          <strong><span id="message15">Disregard last message: WG RECALL, respond NOW!</span></strong>

        </div>
        <div>
          <input id="message_user15" autofocus placeholder="Reply" autocomplete="off" type="STRING">
          <button id="button_message_user15" class="btn-basic" onClick="reply(this.id)">Send</button>
        </div>
      </div>

      <div class="well">
        <div>

          <p><a href="/group/1">55 WG</a> posted
            <script>
              document.write(moment("2017-11-24T17:17:29 Z").fromNow());
            </script>:</p>

        </div>
        <div>

          <button type="button" class="btn btn-primary disabled">Acknowledged</button>

          <strong><span id="message10">We are bored and figured you needed work...</span></strong>

        </div>
        <div>
          <input id="message_user10" autofocus placeholder="Reply" autocomplete="off" type="STRING">
          <button id="button_message_user10" class="btn-basic" onClick="reply(this.id)">Send</button>
        </div>
      </div>

      <div class="well">
        <div>

          <p><a href="/group/2">45 RS</a> posted
            <script>
              document.write(moment("2017-11-24T17:17:00 Z").fromNow());
            </script>:</p>

        </div>
        <div>

          <button type="button" class="btn btn-primary disabled">Acknowledged</button>

          <strong><span id="message5">Get to work MEOW!</span></strong>

        </div>
        <div>
          <input id="message_user5" autofocus placeholder="Reply" autocomplete="off" type="STRING">
          <button id="button_message_user5" class="btn-basic" onClick="reply(this.id)">Send</button>
        </div>
      </div>

      <div class="well">
        <div>

          <p><a href="/group/4">DOW</a> posted
            <script>
              document.write(moment("2017-11-24T17:16:45 Z").fromNow());
            </script>:</p>

        </div>
        <div>

          <button type="button" class="btn btn-primary disabled">Acknowledged</button>

          <strong><span id="message1">Where are the office keys?</span></strong>

        </div>
        <div>
          <input id="message_user1" autofocus placeholder="Reply" autocomplete="off" type="STRING">
          <button id="button_message_user1" class="btn-basic" onClick="reply(this.id)">Send</button>
        </div>
      </div>


    </main>
  </div>
</body>

<button id=clickme>Click me to fetch data from the local webserver</button>
<div id=output></div>

＆＃13;

＆＃13;

＆＃13;