时间戳

首页 > 解决方案 > 不显示正确的值 JAVASCRIPT ARRAY

javascript - 不显示正确的值 JAVASCRIPT ARRAY

问题描述

今天我正在编写脚本，当我想测试它时，我可以看到它不能正常工作它显示值 [object Object] 而不是真实值（它也没有改变值）。它显示：点击此处查看图片 必要时点击 Google 或 Yahoo 附近的“编辑”。当我点击 Google 附近的“编辑”并点击编辑时编辑它时，我想显示正确的值。我试图更改 Checker[Name] 的 Checked[Item] 值，但它只显示未定义。

html:

<!DOCTYPE html>
<html>

<head>

    <title>SSL Checker</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/json.json" charset="utf-8"></script>
</head>

<body onLoad="start()">
    <div id="title">
        <h1>SSL Checker</h1>
    </div>
    <div id="data">
        <form action="javascript:void(0);" method="POST" onsubmit="SSL.Add()">
            <input type="text" id="add-name" placeholder="Name"></input>
            <input type="text" id="add-link" placeholder="Link"></input>
            <input type="submit" value="Add">
        </form>

        <div id="edit" role="aria-hidden">
            <form action="javascript:void(0);" method="POST" id="saveEdit">
                <input type="text" id="edit-name">
                <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">&#10006;</a>
            </form>
        </div>
        <p id="counter"></p>
    </div>
    <div id="table">
        <table style="overflow-x:auto;">
            <tr>
                <th>Sites:</th>
            </tr>
            <tbody id="urls">
            </tbody>
        </table>
    </div>
</body>


</html>

js：

function start() {
    var SSL = new function() {
        //List urls to check
        this.el = document.getElementById('urls');
        this.Count = function(data) {
            var el = document.getElementById('counter');
            var name = 'url';

            if (data) {
                if (data > 1) {
                    name = 'urls';
                }
                el.innerHTML = 'There are:' + ' ' + data + ' ' + name;
            } else {
                el.innerHTML = 'No ' + name;
            }
        };
        //Buttons configuration
        this.FetchAll = function() {
            var data = '';

            if (Checker.length > 0) {
                for (i = 0; i < Checker.length; i++) {
                    data += '<tr>';
                    data += '<td><a href="http://' + Checker[i].url + '">' + Checker[i].name + '</a></td>';
                    data += '<td><button onclick="SSL.Edit(' + i + ')">Edit</button></td>';
                    data += '<td><button onclick="SSL.Delete(' + i + ')">Delete</button></td>';
                    data += '</tr>';

                }
            }

            this.Count(Checker.length);
            return this.el.innerHTML = data;
        };
        //Add name
        this.Add = function() {
            el = document.getElementById('add-name');
            el1 = document.getElementById('add-link')
            var url = el.value;
            var url1 = el1.value;
            if (url) {
                if (url) Checker.push({
                    "name": url,
                    "url": url1
                })
                el.value = '';
                this.FetchAll();
            }
        }

        //Edit
        this.Edit = function(item) {
            var el = document.getElementById('edit-name');
            el.value = Checker[item];
            document.getElementById('edit').style.display = 'block';
            self = this;
            document.getElementById('saveEdit').onsubmit = function() {
                var url = el.value;
                if (url) {
                    self.Checker.splice(item, 1, name.trim());
                    self.FetchAll();
                    CloseInput();
                }
            }
        };
        //Delete
        this.Delete = function(item) {
            Checker.splice(item, 1);
            this.FetchAll();
        };

    };

    SSL.FetchAll();

    function CloseInput() {
        document.getElementById('edit').style.display = 'none';
    }
    window.CloseInput = CloseInput;
    window.SSL = SSL;
}

json:

var Checker = [{
        name:"Google",
        url: "google.es",
    },
    {
        name:"Yahoo",
        url: "yahoo.com",
    }
]

标签： javascriptarrays

解决方案

Checker为s 对象的每个属性添加另一个输入标签。

<input type="text" id="edit-name">
<input type="text" id="edit-url">

并分别设置每个输入

var el = document.getElementById('edit-name');
el.value = Checker[item].name;
var el2 = document.getElementById('edit-url');
el2.value = Checker[item].url;

工作代码：

var Checker = [{
    name: "Google",
    url: "google.es",
  },
  {
    name: "Yahoo",
    url: "yahoo.com",
  }
]

document.getElementById('edit').style.display = 'none';

function start() {
  var SSL = new function() {
    //List urls to check
    this.el = document.getElementById('urls');
    this.Count = function(data) {
      var el = document.getElementById('counter');
      var name = 'url';

      if (data) {
        if (data > 1) {
          name = 'urls';
        }
        el.innerHTML = 'There are:' + ' ' + data + ' ' + name;
      } else {
        el.innerHTML = 'No ' + name;
      }
    };
    //Buttons configuration
    this.FetchAll = function() {
      var data = '';

      if (Checker.length > 0) {
        for (i = 0; i < Checker.length; i++) {
          data += '<tr>';
          data += '<td><a href="http://' + Checker[i].url + '">' + Checker[i].name + '</a></td>';
          data += '<td><button onclick="SSL.Edit(' + i + ')">Edit</button></td>';
          data += '<td><button onclick="SSL.Delete(' + i + ')">Delete</button></td>';
          data += '</tr>';

        }
      }

      this.Count(Checker.length);
      return this.el.innerHTML = data;
    };
    //Add name
    this.Add = function() {
      el = document.getElementById('add-name');
      el1 = document.getElementById('add-link')
      var url = el.value;
      var url1 = el1.value;
      if (url) {
        if (url) Checker.push({
          "name": url,
          "url": url1
        })
        el.value = '';
        this.FetchAll();
      }
    }

    //Edit
    this.Edit = function(item) {
      var el = document.getElementById('edit-name');
      el.value = Checker[item].name;
      var el2 = document.getElementById('edit-url');
      el2.value = Checker[item].url;
      document.getElementById('edit').style.display = 'block';
      self = this;

      document.getElementById('saveEdit').onsubmit = function() {
        var url = el2.value;
        var name = el.value;
        if (url && name) {
          Checker[item].name = name;
          Checker[item].url = url;
          self.FetchAll();
          CloseInput();
        }
      }
    };
    //Delete
    this.Delete = function(item) {
      Checker.splice(item, 1);
      this.FetchAll();
    };

  };

  SSL.FetchAll();

  function CloseInput() {
    document.getElementById('edit').style.display = 'none';
  }
  window.CloseInput = CloseInput;
  window.SSL = SSL;
}
<html>

<head>

  <title>SSL Checker</title>

</head>

<body onLoad="start()">
  <div id="title">
    <h1>SSL Checker</h1>
  </div>
  <div id="data">
    <form action="javascript:void(0);" method="POST" onsubmit="SSL.Add()">
      <input type="text" id="add-name" placeholder="Name"></input>
      <input type="text" id="add-link" placeholder="Link"></input>
      <input type="submit" value="Add">
    </form>

    <div id="edit" role="aria-hidden">
      <form action="javascript:void(0);" method="POST" id="saveEdit">
        <input type="text" id="edit-name">
        <input type="text" id="edit-url">
        <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">&#10006;</a>
      </form>
    </div>
    <p id="counter"></p>
  </div>
  <div id="table">
    <table style="overflow-x:auto;">
      <tr>
        <th>Sites:</th>
      </tr>
      <tbody id="urls">
      </tbody>
    </table>
  </div>
</body>


</html>

推荐阅读