如何将使用数据详细信息的按钮添加到用javascript制成的字符串中

约翰

我正在使用以下代码来创建带有信息字符串的不同部分,并且这些部分将显示在我的屏幕上。现在,我想在每个使用数据详细信息的部分中添加一个按钮,以在按钮中存储名称和价格。我尝试通过使用数据详细信息在字符串中添加一个按钮,但是由于必须使用不同的“”和“”而使字符串不完整,并且无法完成代码。

function display(results) {
    article = document.getElementById("homeArticle");
    var html = '';
    for (var i = 0; i < results.length; i++){ 
        var item = results[i];

        var name = item.P_NAME;
        var description = item.P_DESCRIPTION;
        var price = item.P_PRICE;
        var quant = item.P_QUANTITY;
            // next I add to the string that we want to place on the page
        html += '<section id="homePageSection"> <p>Name: ' + name + '</p><p>Description: ' + description + '</p><p>Price: £' + price + '</p><p>Quantity: ' + quant + '</p></section>';

        var button = document.createElement("button");
        button.dataset.detail = JSON.stringify(name);
        button.innerHTML = "Add To Basket"

        var section = document.getElementById("homePageSection");

    };
    article.innerHTML = html;
}


function getItems() {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var results = JSON.parse(this.responseText);
        display(results.rows);
    };
    xhr.open("GET", "displayData.php");
    xhr.send();
}

window.addEventListener("load", getItems);

在查看类似问题的其他答案之后,我尝试使用以下代码:

var button = document.createElement("button");
button.dataset.detail = JSON.stringify(name);
button.innerHTML = "Add To Basket"

var section = document.getElementById("homePageSection");

但是,我不太了解它是如何工作的,需要向正确的方向指出帮助,还是可以只使用数据详细信息来完成它,还是需要使用document.createElementappendChild代码?

html页面是:

<body>

<article id="homeArticle">
</article>

<script src="homeDisplay.js"></script>
</body>
传奇的

多数民众赞成在例子:https//jsfiddle.net/03jqfx6g/

多数民众赞成岁:

var button = document.createElement("button");
button.dataset.detail = JSON.stringify(name);
button.innerHTML = "Add To Basket"

document.getElementById("homePageSection").appendChild(btn);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将信息添加到字符串

来自分类Dev

如何将输出详细信息添加到Helm测试的测试输出中?

来自分类Dev

使用javascript:如何将变量添加到包含引号的字符串中?

来自分类Dev

如何将新添加的数据从Firebase添加到recyclerview的顶部而不是底部?请查看详细信息

来自分类Dev

如何向添加到视图的按钮添加目标?详细信息:视图是类中的受控变量

来自分类Dev

如何将使用按钮创建的对象添加到表中?

来自分类Dev

每次注册时,如何将用户和其他详细信息添加到数据库中的用户节点?

来自分类Dev

如何将字符串中的属性添加到javascript中的对象?

来自分类Dev

如何将使用 pupetteer 抓取的数据添加到 html 中

来自分类Dev

JavaScript-XHR-将SSL证书详细信息添加到请求中

来自分类Dev

如何在 WooCommerce 中的“添加到购物车”按钮旁边添加查看产品详细信息按钮链接?

来自分类Dev

如何将子字符串添加到字符串中

来自分类Dev

您如何使用Django将类似的帖子添加到详细信息页面

来自分类Dev

如何使用javascript将字符串添加到ul中的所有列表项?

来自分类Dev

如何使用javascript将字符串添加到for循环内的列表中?

来自分类Dev

T-SQL:如何将数据添加到存储在字符串中的列中?

来自分类Dev

如何将 Excel 工作簿中的字符串添加到空数据框中?

来自分类Dev

Python:在详细信息字符串中获取价值

来自分类Dev

如何将包含可解析字段的字符串添加到可以添加到数据帧的列中

来自分类Dev

如何将字符串添加到数组?

来自分类Dev

如何将字符串添加到数组?

来自分类Dev

PHP用户注册时,如何将其详细信息添加到现有CSV文件的末尾?

来自分类Dev

如何将产品销售计数添加到我的产品详细信息模板?

来自分类Dev

如何将一串字符串添加到列表中

来自分类Dev

如何将来自 UART 的传入字符添加到字符串中?

来自分类Dev

如何将字符数组中的字符串添加到 C 中的字符串

来自分类Dev

如何将数据从表添加到字符串

来自分类Dev

如何将动态数据(如字符串数组)添加到微调器

来自分类Dev

如何在Windows Phone中以字符串形式获取约会的详细信息?

Related 相关文章

  1. 1

    如何将信息添加到字符串

  2. 2

    如何将输出详细信息添加到Helm测试的测试输出中?

  3. 3

    使用javascript:如何将变量添加到包含引号的字符串中?

  4. 4

    如何将新添加的数据从Firebase添加到recyclerview的顶部而不是底部?请查看详细信息

  5. 5

    如何向添加到视图的按钮添加目标?详细信息:视图是类中的受控变量

  6. 6

    如何将使用按钮创建的对象添加到表中?

  7. 7

    每次注册时,如何将用户和其他详细信息添加到数据库中的用户节点?

  8. 8

    如何将字符串中的属性添加到javascript中的对象?

  9. 9

    如何将使用 pupetteer 抓取的数据添加到 html 中

  10. 10

    JavaScript-XHR-将SSL证书详细信息添加到请求中

  11. 11

    如何在 WooCommerce 中的“添加到购物车”按钮旁边添加查看产品详细信息按钮链接?

  12. 12

    如何将子字符串添加到字符串中

  13. 13

    您如何使用Django将类似的帖子添加到详细信息页面

  14. 14

    如何使用javascript将字符串添加到ul中的所有列表项?

  15. 15

    如何使用javascript将字符串添加到for循环内的列表中?

  16. 16

    T-SQL:如何将数据添加到存储在字符串中的列中?

  17. 17

    如何将 Excel 工作簿中的字符串添加到空数据框中?

  18. 18

    Python:在详细信息字符串中获取价值

  19. 19

    如何将包含可解析字段的字符串添加到可以添加到数据帧的列中

  20. 20

    如何将字符串添加到数组?

  21. 21

    如何将字符串添加到数组?

  22. 22

    PHP用户注册时,如何将其详细信息添加到现有CSV文件的末尾?

  23. 23

    如何将产品销售计数添加到我的产品详细信息模板?

  24. 24

    如何将一串字符串添加到列表中

  25. 25

    如何将来自 UART 的传入字符添加到字符串中?

  26. 26

    如何将字符数组中的字符串添加到 C 中的字符串

  27. 27

    如何将数据从表添加到字符串

  28. 28

    如何将动态数据(如字符串数组)添加到微调器

  29. 29

    如何在Windows Phone中以字符串形式获取约会的详细信息?

热门标签

归档