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

Question

我试图制作一个将姓名和电子邮件作为输入的表单。单击提交按钮，它应该会显示一个警告框，上面写着 "Thank You 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>

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

Cannot access html variables inside javascript in AEM

javascript

aem