根据输入使用Jade生成HTML

Generate HTML with Jade based on Input

本文关键字：Jade 生成 HTML 输入      更新时间：2023-09-26

基本上，我试图让用户有可能生成一个具有特定数量列表条目的列表。如果他输入数字"50"，我想自动生成一个包含50个列表条目的列表。

我现在正在使用Jade和Bootstrap。

我的代码看起来像这样，但显然不起作用。有没有一种简单的方法/改变来实现我的目标，还是我完全走错了路？第一次出现错误是按下"生成按钮"，因为它找不到"生成"功能。

h1 1D Lists
    form(role="form")
        div.form-group
            label(for="itemsNumber") How many List Items?
            input(type="number", class="form-control", placeholder="Number of List Items", id="itemsNumber")
        div.form-group
            label(for="alignment") Alignment?
            select.form-control
                option Horizontal
                option Vertical
        button.generate(type="submit", class="btn btn-default", onclick="generate()") Generate

    - var generate = function() {
    - alert("generated!")
    -   var itemsNumber = document.getElementById("itemsNumber").value;
    -   $("list").html("+list(itemsNumber)");
    - }
    mixin list(number)
        div.list        
            ul.list-group.level1
                a.list-group-item.listhead
                    i.fa.fa-list  My List
                - for (var i = 0; i < number; ++i){
                    a(href="#").list-group-item Entry #{i}
                - }

您的生成函数仅在jade编译时可用，
不在javascript执行时间（在浏览器中）

所以把你的函数放在一个<script>标签中，用script.

相关文章：