堆栈内存溢出
  繁体   English   中英

在不起作用的锚标签中添加 onclick function

[英]Adding onclick function in anchor tag which is not working

 原文  2022-01-22 06:38:31  5   2    javascript/ html

问题描述

我已经使用 bootstarap 进行了下拉。 我在下拉列表中的锚标签中添加了 onlcick 功能。 如果单击其中一个链接，我只想将我的文本框设为只读。 我使用 js 将文本框设为只读。 请帮我解决我的问题。 下面是我的代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous">

<title>Mole Calculator | Chemistry Calculator</title>

</head>



<body>

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">

        <div class="container-fluid">
            <a class="navbar-brand" href="#"><h4>
                    <b>Chemistry Calculator</b>
                </h4></a>

            <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <ul class="navbar-nav  text-uppercase">

                    <li class="nav-item"><a class="nav-link active"
                        aria-current="page" href="/Chemistry-Calculator/">Home</a></li>

                    <li class="nav-item"><a class="nav-link active"
                        aria-current="page" href="/Chemistry-Calculator/about">About</a></li>


                </ul>

            </div>
        </div>
    </nav>

    <div class="container" style="padding-top: 5%;">

        <div class="card px-4 py-5" style="width: 650px;">
            <div class="card-block">

                <form action="/Chemistry-Calculator/Number-Of-Moles">

                    <div class="mb-3">
                        <label for="givenMass" class="form-label">Given Mass of
                            Substance</label> <input type="text" class="form-control" id="givenMass"
                            aria-describedby="emailHelp" name="givenMass"
                            value="${givenMass}" style="width: 600px">
                    </div>
                    <div class="mb-3">
                        <label for="molarMass" class="form-label">Molar Mass</label> <input
                            type="text" class="form-control" id="molarMass" name="molarMass"
                            value="${molarMass}" style="width: 600px">
                    </div>

                    <div class="mb-3">
                        <label for="molarMass" class="form-label">Moles</label> <input
                            type="text"  class="form-control"
                            id="molarMass" name="moles" value="${moles}" style="width: 600px">
                    </div>

                    <input class="btn btn-outline-success" type="submit"
                        value="Calculate">
                        
                    <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle"
                            data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
                            <li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
                            <li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
                        </ul>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="../javascript/script.js"></script>

</body>
</html>

我的 Java 脚本文件：

function readonlyForGivenMass() {
  var x = document.getElementById("givenMass").readOnly;
  
}

function readonlyForMolarMass() {
  var x = document.getElementById("molarMass").readOnly;
  
}


  
    function readonlyForMoles() {
      var x = document.getElementById("moles").readOnly;
      

}

实际上这是 java 项目的一小部分。 因此我使用了 jsp 和 jstl。 我的文件结构：

在此处输入图像描述

2 个解决方案

解决方案1
 0  2022-01-22 07:33:48

<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous">

<title>Mole Calculator | Chemistry Calculator</title>

</head>



<body>

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">

        <div class="container-fluid">
            <a class="navbar-brand" href="#"><h4>
                    <b>Chemistry Calculator</b>
                </h4></a>

            <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <ul class="navbar-nav  text-uppercase">

                    <li class="nav-item"><a class="nav-link active"
                        aria-current="page" href="/Chemistry-Calculator/">Home</a></li>

                    <li class="nav-item"><a class="nav-link active"
                        aria-current="page" href="/Chemistry-Calculator/about">About</a></li>


                </ul>

            </div>
        </div>
    </nav>

    <div class="container" style="padding-top: 5%;">

        <div class="card px-4 py-5" style="width: 650px;">
            <div class="card-block">

                <form action="/Chemistry-Calculator/Number-Of-Moles">

                    <div class="mb-3">
                        <label for="givenMass" class="form-label">Given Mass of
                            Substance</label> <input type="text" class="form-control" id="givenMass"
                            aria-describedby="emailHelp" name="givenMass"
                            value="${givenMass}" style="width: 600px">
                    </div>
                    <div class="mb-3">
                        <label for="molarMass" class="form-label">Molar Mass</label> <input
                            type="text" class="form-control" id="moles" name="molarMass"
                            value="${molarMass}" style="width: 600px">
                    </div>

                    <div class="mb-3">
                        <label for="molarMass" class="form-label">Moles</label> <input
                            type="text"  class="form-control"
                            id="molarMass" name="moles" value="${moles}" style="width: 600px">
                    </div>

                    <input class="btn btn-outline-success" type="submit"
                        value="Calculate">
                        
                    <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle"
                            data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item"  onclick="readonlyForMoles(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
                            <li><a class="dropdown-item" onclick="readonlyForMolarMass(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
                            <li><a class="dropdown-item" onclick="readonlyForGivenMass(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
                        </ul>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
            function readonlyForGivenMass(event) {
                event.preventDefault()

      
  var x = document.getElementById("givenMass").readOnly= true;
  
}

function readonlyForMolarMass(event) {
        event.preventDefault()
  var x = document.getElementById("molarMass").readOnly = true;
  
}


  
    function readonlyForMoles(event) {
        event.preventDefault()

      var x = document.getElementById("moles").readOnly = true;
      
      

}

    </script>

</body>
</html>

如果你愿意，意味着你可以删除每个 function 中的 event.preventDefault，我希望这段代码对你有用。 谢谢

解决方案2
 0  2022-01-22 07:46:41

你只是在分配但声明它，只需要使它成为真的，所以给定的 id 将是只读的，请在下面找到代码片段

function readonlyForGivenMass() {
   document.getElementById("givenMass").readOnly = true;
}

function readonlyForMolarMass() {   
  document.getElementById("molarMass").readOnly = true;;
  
}
 function readonlyForMoles() {
    document.getElementById("moles").readOnly = true;;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 onClick函数不适用于锚标记 定位标记中的Onclick功能不起作用 在selenium中锚点标签onclick功能不起作用？ 定位标记onclick无法正常工作 定位标记onclick无法正常工作 Javascript剪贴板复制功能在点击锚标签时不起作用 锚标签（标签）onclick事件处理程序无法正常工作 锚标签内的图片的Onclick无效 html 锚标记的 onclick 不起作用 动态将onclick事件添加到定位标记，无法正常工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM