javascript - 无法访问 AEM 中 javascript 内的 html 变量

Question

我试图制作一个以姓名和电子邮件作为输入的表单。单击提交按钮，它应该显示一个警告框，上面写着“谢谢您name”。

我知道如何通过设置 Id 来访问 HTML 中的输入变量并在脚本标记内访问它们，但 AEM 中出现了问题。这是我的代码

<sly data-sly-test="${wcmmode.edit}">
    <span>${component.title}</span>
</sly>

<div style="margin-bottom: 10px">
    <div>
        <label>${properties.namelabel}</label>
        <input
            type="${properties.inputType}"
            name="${properties.name}"
            placeholder="${properties.placeholder}"
            required="${properties.required && 'required'}"
            />
    </div>
     <div>
         <label>${properties.maillabel}</label>
         <input
            type="${properties.einputType}"
            name="${properties.ename}"
            placeholder="${properties.eplaceholder}"
            required="${properties.required && 'required'}"
           />
    </div>
    <div>
        <button type = "button" onclick="myFunction();">

            ${properties.buttlabel}

        </button>
    </div>

</div>

<script>
function myFunction() {
  alert("Thank You");
}
</script> 

如果我在 input 标签中设置 Id，我如何才能在 Javascript 中专门访问 name 变量？

Answer 1

评论回复和其他答案都没有解决我的问题。在尝试了一些 jquery/JS 组合之后，我可以通过在输入标记中添加 id 选择器来使其工作:

 <input id = "abc"
     type="${properties.inputType}"
     name="${properties.name}"
     placeholder="${properties.placeholder}"
     required="${properties.required && 'required'}"
  />

从脚本标签内的 id 获取名称值:

<script>
function myFunction() {

var nameValue = document.getElementById("abc").value;
  alert("Thank You" + nameValue);
}
</script>