Javascript 动态信息外作用_Javascript

Javascript 动态信息外作用

javascript

Javascript 动态信息外作用,javascript,Javascript,我正在编写一个代码，用于从.json文件中提取信息并将其打印到网站上。我取得了所有成绩，但现在我有一个问题，数据只显示一个结果，它为其他信息创建了所有框/位置，但只有第一个“框”有信息 <head>  <title>SSL Checker</title> <link rel="stylesheet" type="text/css" href="css

我正在编写一个代码，用于从.json文件中提取信息并将其打印到网站上。我取得了所有成绩，但现在我有一个问题，数据只显示一个结果，它为其他信息创建了所有框/位置，但只有第一个“框”有信息

    <head>
    <!-- Title and Extern files -->
    <title>SSL Checker</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/db.json"></script>
</head>

<body>
    <div id="header">
        <h2>SSL Checker</h2>
    </div>
    <div id="form">
        <p>Introduce the URL:</p>
        <input id="txtbx" type="text">
        <button type="submit" onClick="agregar_caja()">Send</button>
        <div id="inf">
            <p type="text" id="hl1"></p>
            <p type="text" id="hl2"></p>
        </div>
        <script>
            //Extract
            console.log(MyJSON[1].url)
            var cajas = 2
            var boxsaved = MyJSON.length
            fnc = function(info) {
                hey = document.getElementById("hl1").innerHTML = info.url;
            }
            //box creator
            sm = function agregar_caja() {
                document.getElementById("inf").innerHTML += "<p type=text id='hl" + new String(cajas + 1) + "'><br>"
                cajas = cajas + 1
            }
            //Loops
            for (i = 0; i < boxsaved; i++) {
                sm(MyJSON[i]);
            }
            for (i = 0; i < MyJSON.length; i++) {
                fnc(MyJSON[i]);
            }
        </script>
</body>

阅读所有代码是非常困难的，但正如我所了解的，您希望使用JSON中的url添加一些元素

好的，我们有id='inf'的父元素div，让我们使用javascript函数appendChild添加新元素

我们将使用document.createElement（'p'）来创建新元素

这是我理解的预期行为的代码

 var infContainer = document.getElementById('inf');
 var elNumber = 2;
 function agregar_caja() {
    MyJSON.forEach(function(item,i) {
        var newElement = document.createElement('p');
        newElement.innerHTML = item.url;
        newElement.id = 'hl'+elNumber;
        elNumber++;
        infContainer.appendChild(newElement);
    }
)}

问题是第一个框是

fnc

函数更改的唯一元素-请注意，它只使用

hl1

id访问和更改元素，而不是

hl2+

我会尽量保持你原来的方法，这样你会更容易地遵循它。您可以这样做：

var cajas = 2;

function sm(info) {
    cajas = cajas + 1;
    document.getElementById("inf").innerHTML += (
      '<div id="hl' + cajas + '">' + info.url + '</div>'
    );
}

for (var i = 0; i < MyJSON.length; i++) {
    sm(MyJSON[i]);
}

var-cajas=2；
功能sm（信息）{
cajas=cajas+1；
document.getElementById（“inf”）.innerHTML+=(
“+info.url+”
);
}
for（var i=0；i

请格式化您的JS和JSON代码；如果你不知道自己该怎么做，可以使用类似的方法。你的代码很难读懂。完成了，你现在能帮我吗？：）您的代码给了我一个错误，SyntaxError:Unexpected token'}。应为“）”以结束参数列表。它没有执行任何操作，没有显示任何内容，也没有创建更多的框：/我已检查，一切正常。这个函数添加了两个带有json URL的“p”元素。我猜他没有调用

agregar_caja

函数（你发布的代码没有调用它）。他在学习，很有效，非常感谢。你能解释一下你改变了什么吗？：）基本上，您的代码首先循环JSON以创建元素，然后再次循环JSON以在每个元素中插入URL。我的代码只循环一次，同时执行两个步骤。这消除了必须通过生成的ID在第二个循环中查找元素以插入URL的问题。好的，谢谢您的帮助，您认为可以通过html上创建的公式集编辑json文件吗？当我单击“发送”时，请在json文件上插入一个url。如何执行此操作完全取决于您运行的服务器类型。我希望在本地PC上执行此操作，将数据保存在同一文件上。json使用相同的代码

var cajas = 2;

function sm(info) {
    cajas = cajas + 1;
    document.getElementById("inf").innerHTML += (
      '<div id="hl' + cajas + '">' + info.url + '</div>'
    );
}

for (var i = 0; i < MyJSON.length; i++) {
    sm(MyJSON[i]);
}