动态按钮调用JavaScript函数

Dynamic Button call JavaScript Function

本文关键字：函数 JavaScript 调用 按钮 动态      更新时间：2024-06-13

我有一个脚本和一个Dinamic创建的按钮，事件OnClick不起作用我需要将Id和inQuantidade传递给ValidarEstoqueVend.htm，JavaScript是我认为它可能的的唯一方式

page import="usuario.usuario"%>
<%@page import="DAO.DAO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="produto.produto"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<% usuario Usuario = (usuario) session.getAttribute("Usuario");%>
        <script>
            function clickVender(){
                var Id = document.getElementById('Id');
                var inQuantidade = document.getElementById('inQuantidade');
                if(Id.value != "")
        alert("You entered: " + Id.value)
                 else
        alert("Would you please enter some text?")
                document.location.href="ValidarEstoqueVenda.htm?Id="+Id.value+"&inQuantidade="+inQuantidade;
            }
        </script>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/materialize.css">
<!-- Include CSS File Here -->
        <script src="js/materialize.js"></script>
        <title>Estoque Online - Estoque</title>
    </head>
    <body>
     <div class="navbar-fixed">
    <nav id="nav_f" class="default_color" role="navigation">
        <div class="container">
            <div class="nav-wrapper">
            <a href="#" id="logo-container" class="brand-logo">Controle de Estoque</a>
                <ul class="right hide-on-med-and-down">
                <li><a href="Estoque.jsp">Estoque</a></li>
                <%if (Usuario.getTipo() == 2){%>
                <li><a href="CadastroEstoque.jsp">CadastroEstoque</a></li>
                <li><a href="CadastroTipo.jsp">Cadastro Tipo</a></li>
                <li><a href="Tipo.jsp">Tipo</a></li>
                <li><a href="Usuario.jsp">Usuario</a></li>
                <%}%>
                <li><a href="redirect.jsp">Sair</a></li>
                </ul>
                <ul id="nav-mobile" class="side-nav">
                <li><a href="Estoque.jsp">Estoque</a></li>
                <%if (Usuario.getTipo() == 2){%>
                <li><a href="CadastroTipo.jsp">Cadastro Tipo</a></li>
                <ul id='dropdown2' class='dropdown-content'>
                <li><a href="Usuario.jsp">Usuario</a></li>
                </ul>
                <%}%>
                <li><a href="redirect.jsp">Sair</a></li>
                </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
            </div>
        </div>
    </nav>
   </div>
        <form action="ValidarEstoque" method="get">
            <table class="striped responsive-table black-text teal darken-1">
                <thead>
                    <tr>
                        <th data-field="id">Id</th>
                        <th data-field="nome">Descricao</th>
                        <th data-field="email">Quantidade</th>
                        <th data-field="Alterar">Alterar</th>
                        <th data-field="Excluir">Exlcuir</th>
                    </tr>
                </thead>
                    <tbody>
                        <tr>
                            <%  List<produto> produtos = new ArrayList<produto>();
                            DAO dao = new DAO();
                            produtos = dao.listarEstoque();%>                         
                            <%for(produto produto : produtos){%>
                            <td><%=produto.getId()%></td>
                            <td><%=produto.getDescricao()%></td> 
                            <td><input type="text" id="inQuantidade" name="inQuantidade" value="<%=produto.getQuantidade()%>"></td>
                            <% if(Usuario.getId() != 0){%>
                            <td><a href="CadastroEstoque.jsp?Id=<%=produto.getId()%>">Alterar</a></td>
                            <td><a href="Excluir.htm?Id=<%=produto.getId()%>&exclusao=Estoque">Excluir</a></td>
                            <td><a class="btn waves-effect waves-light col s12" onclick="clickVender()">Vender</a></td>
                            <%
                            }
                            %>
                        </tr>
                        <%
                        }
                        %>             
                    </tbody>
            </table>                                       
        </form>
    </body>
</html>

最后一个标记具有onCLick函数。

请帮助我

您的代码没有名为"id"的id。并且不应该使用内联事件处理程序。

你应该参考我的代码。

[HTML]

<td>
  <input type="text" id="Id" name="MYID" value="my dummy Id">
</td>
<td>
  <input type="text" id="inQuantidade" name="inQuantidade" value="getQuantidade">
</td>
<td><a class="govender">Vender</a></td>

[JavaScript]

function clickVender() {
  var id = document.getElementById("Id");
  var inQuantidade = document.getElementById("inQuantidade");
  alert(id.value + ":" + inQuantidade.value);
}
document.querySelector(".govender").onclick = clickVender;
//or you can use addEventListener.

https://jsfiddle.net/nigayo/n81hd5f3/

[#附加说明]

您可以在Chrome开发工具的控制台选项卡上看到错误消息。https://developer.chrome.com/devtools/docs/console

相关文章：