如何在 HTML 中使用变量

How to use a variable in HTML

我正在尝试在我的 HTML 文件中使用一个名为“Description”的变量,我是这样定义的:

       <h1 th:text="'Product ' + ${item.itemCode}"></h1>
            <div class="inset">
                <p>
                    <label>Item Code</label>
                    <b th:text= "${item.itemCode}"></b>
                <p>
                <p>
                    <label>Item Description</label>
                    <b th:text= "${item.Description}" contenteditable="true" name="Description" id="Description"></b>
                <p>
                <p>
                    <label>Item Price</label>
                    <b th:text= "${item.Price}" contenteditable="true" name="price" id="price"></b>
                <p>
                <p>
                    <label>Item Creation Date</label>
                    <b th:text= "${item.creationDate}" contenteditable="true" name="date" id="date"></b>
                <p>
                <p>
                    <label>Item Creator</label>
                    <b th:text= "${item.creatorUser}" contenteditable="true" name="creator" id="creator"></b>
                <p>
                <p>
                    <label>Item State</label>
                    <b th:text= "${item.itemEnum.getEstado()}"></b>
                <p>

                <p>
                    <a th:href="@{/api/item/saveChanges(itemCode = ${item.itemCode}, description = getVariable())}"> <input name="submit" type="submit" value="Save Changes" /></a>
                </p>
                <p th:if="${item.itemEnum.getEstado() == 'Active'}">
                    <a th:href="@{/api/item/changeInactive/{itemCode}(itemCode = ${item.itemCode})}"> <input name="submit" type="submit" value="Deactivate" width="100%"/></a>
                </p>
                <p th:if="${item.itemEnum.getEstado() == 'No Active'}">
                    <a th:href="@{/api/item/changeActive/{itemCode}(itemCode = ${item.itemCode})}"> <input name="submit" type="submit" value="Activate" width="100%" /></a>
                </p>

            </div>
<script>
    function getVariable(){
        return document.getElementById("Description");
    }
</script>

基本上,我从我的控制器中获取该变量。但是,它是可编辑的。我想要的是能够获得“Description”的当前值,这样我就可以将其发送回控制器进行更新,如下所示:

<a th:href="@{/api/item/saveChanges(description = ${Description})

你可以像这样使用它:

<textarea rows="7" cols="10" th:text= "${item.Description}" name="Description" >

在controller中接收,如果用户更新了,你会得到一个更新后的值。