html onclick运行javascript函数不起作用

Question

I'm trying to run a javascript menthod on an input="image" in html. 我正在尝试在html的input =“ image”上运行javascript方法。 My code in my html looks like this: 我在HTML中的代码如下所示：

onclick="manageHandlers('Unassign'); document.getElementsByName('manageHandlers')[0].submit(); "

and in my javascript the method is like this: 在我的javascript中，方法是这样的：

function manageHandlers(parameter){
   alert("It's working: "+parameter);
}

Is there something I'm doing wrong? 我做错了什么吗？ I could sware this worked yesterday but today it's just not doing anything. 我可以发誓昨天该方法有效，但今天它什么也没做。

Thanks for looking at this! 感谢您的关注！

full html code: 完整的html代码：

    <%-- 
    Document   : pathologist
    Created on : 16 Nov 2011, 09:53:58 AM
    Author     : dean.grobler
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

<%@ page import="javax.portlet.*"%>
<%@ page import="co.za.lancet.medelogget.*" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.liferay.portal.kernel.servlet.*" %>
<%@page import="com.liferay.portal.kernel.util.Validator" %>

<portlet:defineObjects />

<%
    String editable = request.getParameter("editable");
    String selectedValue = request.getParameter("selectedValue");
    int selectedIndex = 0;
    if (selectedValue != null) {
        selectedIndex = Integer.parseInt(selectedValue);
    }
    ArrayList<String> data = tableData.getTableData(selectedIndex, "consumers", "code");
    String AvailableJavaScript = tableData.consumersAvailableHandlers(data.get(0));  
    String AssignedJavaScript = tableData.consumersAssignedHandlers(data.get(0)); //data.get(0) is the whereclause    

%>

<!-- -------------------------Interface Starts here------------------------- -->

<aui:layout>
    <form name="consumerDetails" action="<portlet:actionURL ><portlet:param name="consumers" value="consumers"/></portlet:actionURL>" method="post">
        <input type="hidden" value="consumers" name="formType" />
        <input type="hidden" value="<%=selectedValue%>" name="selectedValue" />



    <input type="hidden" value="" id="button" name='button' />
    <aui:column columnWidth="50">
        <h3>
            <%if (editable.equals("")) {%>
            Edit Consumer
            <%} else {%>
            Consumer Details 
            <%}%>
            <%%>
        </h3>   
        <div class="horizontalRules"><hr class></div>
        <div id="successAndErrorMessages"></div>

        <table width="100%">
            <tr height="35px"><td width="25%">Code:</td><td><input type="text" value="<%=data.get(0)%>" name="code"  class="textBoxes" <%=editable%>></td></tr>
            <tr height="35px"><td width="25%">Description:</td><td><input type="text" value="<%=data.get(1)%>" name="description"  class="textBoxes" <%=editable%>></td></tr>           
        </table>
    </aui:column>    

    </form>
    </aui:layout>

    <!-- --------------------Handler rules section---------------------- -->        
    <%if (editable.equals("")) {%>

    <aui:layout>
        <aui:column columnWidth="100">
            <h3>Manage Handler Rules</h3>
            <div class="horizontalRules"><hr class></div>                        
            </aui:column>
        </aui:layout>

    <aui:layout>

        <form name="manageHandlers" id="formType" action="<portlet:actionURL ><portlet:param name="manageHandlers" value="manageHandlers"/></portlet:actionURL>" method="post">

            <!-- index selected in handlers tables -->
            <input type="hidden" name="selectedHandler" id="selectedHandler" /> 
            <input type="hidden" value="" id="handlerButton" name='handlerButton' />
            <input type="hidden" value="" id="button" name='button' />
            <input type="hidden" value="" id="tableType" name='tableType' />
            <input type="hidden" value="manageHandlers" name="formType" />

            <table width="100%">
                <tr><td width="35%"><table width="100%">
                            <tr>
                                <td><h4 style="margin-bottom: 10px;">Available Rules</h4></td>
                            </tr>
                            <tr>
                                <td><div class="availableTable" id='available_div'></div></td>
                            </tr>
                        </table></td>

                    <td width="15%"><div class="manageHandlersButtons1">
                            <table width="100%">
                                <tr>
                                    <td><h4>Fatal Error:</h4></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" id="fatal" name="fatal" class="manageHandlersCheckbox" value="1" /></td>                                        
                                </tr>
                                <tr>
                                    <td><input type="image" id="button" value="Assign" src="<%=renderRequest.getContextPath()%>/Images/rightarrow.png" alt="Assign Selected Rule" class="imgAssignUnassign" onclick="if(manageHandlers('Assign')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
                                </tr>
                                <tr>
                                    <td><input type="image" id="button" value="Unassign" src="<%=renderRequest.getContextPath()%>/Images/leftarrow.png" alt="Unassign Selected Rule" class="imgAssignUnassign" onclick="manageHandlers('Unassign'); document.getElementsByName('manageHandlers')[0].submit(); " /></td>
                                </tr>
                            </table>
                        </div></td>

                    <td width="35%"><table width="100%">
                            <tr>
                                <td><h4 style="margin-bottom: 10px;">Assigned Rules</h4></td>
                            </tr>
                            <tr>
                                <td><div class="assignedTable" id='assigned_div'></div></td>
                            </tr>
                        </table></td>

                    <td width="15%"><div class="manageHandlersButtons2">
                            <table width="100%">
                                <tr>
                                    <td><input type="button" id="button" name="MoveUp" value="MoveUp" style="width: 85px;" class="manageHandlersMvUp" onclick="if(manageHandlers('Move up')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td> 
                                </tr>
                                <tr>
                                    <td><input type="button" id="button" name="MoveDown" value="MoveDown" style="width: 85px;" class="manageHandlersMvDwn" onclick="if(manageHandlers('Move down')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
                                </tr>
                            </table></div>

                    </td></tr>
            </table>
        </form>                                

    </aui:layout>        

    <div class="horizontalRules2"><hr class></div>          

    <%}%>

    <table width="100%">
        <tr>
            <td width="25%"><input type="button" value="Back" style="width: 80px;" class="leftButtons"  onClick="document.getElementById('button').value='Back'; document.getElementsByName('consumerDetails')[0].submit()" /></td>

            <!-- if not editable, don't display this button -->
            <% if (editable.equals("")) {%>                   
            <td><input type="button" value="Save" style="width: 80px;" class="rightButtons" onClick="if (addEntryValidator('Save','consumers','edit')) {document.getElementsByName('consumerDetails')[0].submit()}" /></td>                    
                <% }%>
        </tr> 
    </table>

    <!-- JavaScript Tables -->    
    <script type="text/javascript"><%= AssignedJavaScript%></script>
    <script type="text/javascript"><%= AvailableJavaScript%></script>

Answer 1

This is just wrong: 这是错误的：

onclick="manageHandlers('Unassign'); 
document.getElementsByName('manageHandlers')[0].submit();"

I have never seen anything like that before..or if it is indeed possible and I do miss something, then I bet it's rarely done because it's a bad practice to not separate your js codes from content layer (HTML). 我以前从未见过这样的东西..或者如果确实有可能并且确实错过了一些事情，那么我敢打赌它很少做，因为不将您的js代码与内容层（HTML）分开是一种不好的做法。

Anyway, onclick is an event handler. 无论如何， onclick是一个事件处理程序。 You normally assign a function that gets executed when clicking happens. 通常，您分配一个单击发生时执行的功能。

If I were you I would not probably do inline javascript. 如果我是你，我可能不会做内联JavaScript。 But if you really want to keep it inline, then you could try this: 但是，如果您真的想保持其内联，则可以尝试以下操作：

function manageHandlers(parameter){
    alert('blabla' + parameter);
    document.getElementsByName('manageHandlers')[0].submit();
}

and onclick, you can do just onclick="manageHandlers('Unassign');" 和onclick，您可以只执行onclick="manageHandlers('Unassign');" hope that helps.. 希望能有所帮助。

html onclick运行javascript函数不起作用

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-01-27 09:56:56

html onclick运行javascript函数不起作用

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-01-27 09:56:56

解决方案1
3 已采纳 2012-01-27 09:56:56