javascript - 使用带有 javascript 的按钮添加文本并使用另一个按钮更改它-6ren

javascript - 使用带有 javascript 的按钮添加文本并使用另一个按钮更改它

转载作者：行者123 更新时间：2023-11-27 23:06:27

我需要将案例设置为已解决或未解决，使用按钮“Uløst”表示未解决，“løst”表示已解决。

Atm 如果没有解决，我可以将颜色从白色更改为红色，如果解决了，我可以将颜色从白色更改为绿色。现在我想在

中添加“løst”或“Ikke løst”

 <li id="status" class="Case-info">Status:(here)</li>

基于我点击的按钮。

如果我按“Uløst”，状态应该显示为“Status: ikke løst”如果我按“Løst”，状态应该显示为“Status: løst”

这是当前 [issue][1] 的 Codepen 链接

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    function solved(){
        document.getElementById("weapon").style.borderColor ="green";
    };

    function notSolved(){
         document.getElementById("weapon").style.borderColor ="red";
    };</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>    body{
        
        height: 100%;
        background-image:  url(https://images.unsplash.com/photo-1490822061517-61b5e64bf21c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
        background-size: cover;
        background-repeat: no-repeat;
            
    }

    h2{
        font-family: 'Oswald', sans-serif;
        padding: 0;
        color: white;
    }

    img{
        background: white;
        height: 100%;
        width: 100%;
    }

    .gallery{
    text-align: center;
      height: 400px;
      width: 600px;
      position: relative;
      overflow: hidden;
        margin: auto;
    }



    #logo{
        height: 50px;
        width: 50px;
        padding
    }

    .top-nav {
      background-color: black;
      overflow: hidden;
    }

    .topnavlinks {
      float: right;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
        
    }

    .top-nav a:hover {
      background-color: slategray;
      color: black;
    }

    .top-nav a.active {
      background-color: #4CAF50;
      color: white;
    }

    #main-content-grid{
        text-align: center;
        color: white;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 1rem;
    }

    #index-button{
        margin: 0.5rem;
        width: 25%;
        height: 2rem;
        border-radius: 12px;
        background-color: #555555;
        border: solid, 15px, black;
        font-size: 1rem;
        color: white;
        outline: none;   
        display: inline;
    }

    .img-fluid{
        width: 50%;
        height: auto;
    }

    .Case-info{
        color: black;
        background: white;    
        font-family:sans-serif;
        font-size-adjust: auto;
        text-align: left;
        padding-bottom: 0.5rem;
    }

    /*
        Mobile code        
    */

    .col-xs-12{
        grid-column: auto / span 12;
    }       

    /*
        Media queries
        *******
    */        

    /*
        Tablet
    */
    @media (min-width: 760px){

        .col-md-12{
            grid-column: auto / span 12;
        }

        .col-md-6{
            grid-column: auto / span 6;
        }            
    }

    /*        
        Smallest desktop >992px
    */        
    @media (min-width: 992px){
        .col-lg-12{
            grid-column: auto / span 12;
        }
        .col-lg-6{
            grid-column: auto / span 6;
        }
        .col-lg-4{
            grid-column: auto / span 4;
        }
    }


    ul{
        list-style-type: none;
        margin: 0;
        padding: 1rem;
        border: 2px, grey;
    }

    li{
        
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    input{
        width: 50%;
        height: 2rem;
        border-radius: 12px;
        background-color: #555555;
        border: solid, 15px, black;
        font-size: 1rem;
        color: white;
        outline: none;    
    }


    #spacing{
        height: 8rem;
    }

    #weapon{
      margin: auto;
      width: 50%;
      border: 3px solid;
      padding: 0px;
    }

    .top-nav{
        background: white;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Våpen smuglere</title>
        <script src="/Script/jquery-3.4.1.js"></script>
        <script src="/Script/weapons.js"></script>
        <link rel="stylesheet" type="text/css" href="/CSS/index.css">
        <link rel="stylesheet" type="text/css" href="/CSS/weaponsmugler.css">
        
    </head>
    <body>
       
       <div class="top-nav">
      <a href="Index.html">
          <img id=logo src="bilder/PST.png" alt="PST logo">
      </a>
      <a class="topnavlinks" href="login.html">Logg ut</a>
      <a  class="topnavlinks"href="Admin.html">Ny sak</a>
    </div>
       
       
       <div id="container">
        
        <div id="spacing">
            
        </div>
                
                        
           <main id="main-content-grid">
               
               <article id="weapon" class="col-xs-12 col-md-6 col-lg-4">
                   <h3>Mistenkt våpensmugling</h3>
                   <img class="img-fluid" src="bilder/VåpenSmugler.jpg">
                   <ul>
                       <li class="Case-info">Type sak: Våpensmugling</li>
                       <li id="status" class="Case-info">Status:</li>
                       <li class="Case-info">Mistenkte: Motorsykkelklubb fra Lillestrøm</li>
                       <li class="Case-info">Beskrivelse: En motorsykkelklubb fra Lillestrøm er mistenkt i å smulge store mengeder våpen fra Russland via Finland</li>
                   </ul>
                    <input class="solved" onclick="notSolved()" type="button" value="Uløst">
                   <input class="solved" onclick="solved()" type="button" value="Løst">
               </article>
 <article id="weapon" class="col-xs-12 col-md-6 col-lg-4">
                   <h3>Mistenkt våpensmugling</h3>
                   <img class="img-fluid" src="bilder/VåpenSmugler.jpg">
                   <ul>
                       <li class="Case-info">Type sak: Våpensmugling</li>
                       <li id="status" class="Case-info">Status:</li>
                       <li class="Case-info">Mistenkte: Motorsykkelklubb fra Lillestrøm</li>
                       <li class="Case-info">Beskrivelse: En motorsykkelklubb fra Lillestrøm er mistenkt i å smulge store mengeder våpen fra Russland via Finland</li>
                   </ul>
                    <input class="solved" onclick="notSolved()" type="button" value="Uløst">
                   <input class="solved" onclick="solved()" type="button" value="Løst">
               </article>
 <article id="weapon" class="col-xs-12 col-md-6 col-lg-4">
                   <h3>Mistenkt våpensmugling</h3>
                   <img class="img-fluid" src="bilder/VåpenSmugler.jpg">
                   <ul>
                       <li class="Case-info">Type sak: Våpensmugling</li>
                       <li id="status" class="Case-info">Status:</li>
                       <li class="Case-info">Mistenkte: Motorsykkelklubb fra Lillestrøm</li>
                       <li class="Case-info">Beskrivelse: En motorsykkelklubb fra Lillestrøm er mistenkt i å smulge store mengeder våpen fra Russland via Finland</li>
                   </ul>
                    <input class="solved" onclick="notSolved()" type="button" value="Uløst">
                   <input class="solved" onclick="solved()" type="button" value="Løst">
               </article>
               
           </main>
           
       </div>
        
    </body>
    </html></code></pre>
</div>
</div>

最佳答案

您可以结合使用 document.getElementById 和 .innerHTML 来设置单击按钮时的文本值。这将做的是选择具有状态 ID 的列表项，然后它将重置该 HTML 元素内的文本值。让我知道这是否有意义，如果这有帮助，请告诉我。

function solved(){
    document.getElementById("weapon").style.borderColor ="green";
    document.getElementById("status").innerHTML = "Status: løst";
};

function notSolved(){
     document.getElementById("weapon").style.borderColor ="red";
     document.getElementById("status").innerHTML = "Status: ikke løst";
};

编辑:更新了下面的代码以考虑多个部分(见下面的评论)。

所以，首先，正如我在 HTML 中的评论中提到的，您不能对多个 HTML 元素使用相同的 ID，ID 本质上必须是唯一的(例如，不应使用多个“武器”或“状态”ID) .我更新了代码，使您的 CSS 成为新武器类别的武器 ID，然后将其添加到那些相关的 HTML 元素中。您可以通过在每个类名称之间添加一个空格来将多个类添加到 HTML 元素。

然后我为每个武器、状态和按钮添加了唯一的 ID。然后，您可以使用 onClick 事件处理程序做的一件事是您可以传入 this.id，这使您的函数可以访问调用该函数的 HTML 元素的 ID。然后，在函数本身中，我使用基本的 if/else 条件逻辑来检查正在调用的 id 以应用必要的格式。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Våpen smuglere</title>
        <script src="/Script/jquery-3.4.1.js"></script>
        <script src="/Script/weapons.js"></script>
        <link rel="stylesheet" type="text/css" href="/CSS/index.css">
        <link rel="stylesheet" type="text/css" href="/CSS/weaponsmugler.css">

    </head>
    <body>

       <div class="top-nav">
      <a href="Index.html">
          <img id=logo src="bilder/PST.png" alt="PST logo">
      </a>
      <a class="topnavlinks" href="login.html">Logg ut</a>
      <a  class="topnavlinks"href="Admin.html">Ny sak</a>
    </div>


       <div id="container">

        <div id="spacing">

        </div>


           <main id="main-content-grid">

               <article id="weapon1" class="weapon col-xs-12 col-md-6 col-lg-4">
                   <h3>Mistenkt våpensmugling</h3>
                   <img class="img-fluid" src="bilder/VåpenSmugler.jpg">
                   <ul>
                       <li class="Case-info">Type sak: Våpensmugling</li>
                       <li id="status1" class="Case-info">Status:</li>
                       <li class="Case-info">Mistenkte: Motorsykkelklubb fra Lillestrøm</li>
                       <li class="Case-info">Beskrivelse: En motorsykkelklubb fra Lillestrøm er mistenkt i å smulge store mengeder våpen fra Russland via Finland</li>
                   </ul>
                    <input id="button__not-solved1" class="solved" onclick="notSolved(this.id)" type="button" value="Uløst">
                    <input id="button__solved1" class="solved" onclick="solved(this.id)" type="button" value="Løst">
               </article>
 <article id="weapon2" class="weapon col-xs-12 col-md-6 col-lg-4">
                   <h3>Mistenkt våpensmugling</h3>
                   <img class="img-fluid" src="bilder/VåpenSmugler.jpg">
                   <ul>
                       <li class="Case-info">Type sak: Våpensmugling</li>
                       <li id="status2" class="Case-info">Status:</li>
                       <li class="Case-info">Mistenkte: Motorsykkelklubb fra Lillestrøm</li>
                       <li class="Case-info">Beskrivelse: En motorsykkelklubb fra Lillestrøm er mistenkt i å smulge store mengeder våpen fra Russland via Finland</li>
                   </ul>
                    <input id="button__not-solved2" class="solved" onclick="notSolved(this.id)" type="button" value="Uløst">
                    <input id="button__solved2" class="solved" onclick="solved(this.id)" type="button" value="Løst">
               </article>
 <article id="weapon3" class="weapon col-xs-12 col-md-6 col-lg-4">
                   <h3>Mistenkt våpensmugling</h3>
                   <img class="img-fluid" src="bilder/VåpenSmugler.jpg">
                   <ul>
                       <li class="Case-info">Type sak: Våpensmugling</li>
                       <li id="status3" class="Case-info">Status:</li>
                       <li class="Case-info">Mistenkte: Motorsykkelklubb fra Lillestrøm</li>
                       <li class="Case-info">Beskrivelse: En motorsykkelklubb fra Lillestrøm er mistenkt i å smulge store mengeder våpen fra Russland via Finland</li>
                   </ul>
                    <input id="button__not-solved3" class="solved" onclick="notSolved(this.id)" type="button" value="Uløst">
                    <input id="button__solved3" class="solved" onclick="solved(this.id)" type="button" value="Løst">
               </article>

           </main>

       </div>

    </body>
    </html>

CSS(只需将#weapon 更改为.weapon)

.weapon{
  margin: auto;
  width: 50%;
  border: 3px solid;
  padding: 0px;
}

JavaScript

function solved(id){  
  if (id === "button__solved1") {
    document.getElementById("weapon1").style.borderColor ="green";
    document.getElementById("status1").innerHTML = "Status: løst";
  } else if (id === "button__solved2") {
    document.getElementById("weapon2").style.borderColor ="green";
    document.getElementById("status2").innerHTML = "Status: løst";
  } else if (id === "button__solved3") {
    document.getElementById("weapon3").style.borderColor ="green";
    document.getElementById("status3").innerHTML = "Status: løst";
  }
};

function notSolved(id){
  if (id === "button__not-solved1") {
    document.getElementById("weapon1").style.borderColor ="red";
    document.getElementById("status1").innerHTML = "Status: ikke løst";
  } else if (id === "button__not-solved2") {
    document.getElementById("weapon2").style.borderColor ="red";
    document.getElementById("status2").innerHTML = "Status: ikke løst";
  } else if (id === "button__not-solved3") {
    document.getElementById("weapon3").style.borderColor ="red";
    document.getElementById("status3").innerHTML = "Status: ikke løst";
  }
};

关于javascript - 使用带有 javascript 的按钮添加文本并使用另一个按钮更改它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58718301/

文章推荐： html - 定位位置为 :fixed side-by-side each other 的元素

文章推荐： C++ 结构和类编译器错误

文章推荐： c++ - 多线程无法按预期工作

文章推荐： html - 将元素放在高度为 100% 的包装底部

javascript - 如何在单击添加时隐藏最后一次单击(添加)按钮以及当用户单击删除按钮然后显示上一个隐藏(添加)按钮
我创建了一个用户可以添加测试的字段。这一切运行顺利我只希望当用户点击(添加另一个测试)然后上一个(添加另一个测试)删除并且这个显示在新字段中。所有运行良好的唯一问题是点击(添加另一个字段)之前添加另
java - 将数组的内容添加到 JFrame，添加 JPanel，添加 JScroll
String[] option = {"Adlawan", "Angeles", "Arreza", "Benenoso", "Bermas", "Brebant
php - 为什么我们不能使用 MAC 添加。而不是 IP 添加
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎不是关于 a specific programming problem, a softwar
jquery - 添加 jQuery Nav-tab 添加 Bootstrap
我正在努力将 jQuery 滚动功能添加到 nav-tab (Bootstrap 3)。我希望用户能够选择他们想要的选项卡，并在选项卡内容中有一个可以平滑滚动到 anchor 的链接。这是我的代码，可
jquery - 添加 CSS 到 jQuery Ui Tab 添加
我正在尝试在用户登录后再添加 2 个 ui 选项卡。首先，我尝试做一个之后。 $('#slideshow').tabs('remove', '4'); $("#slideshow ul li:last
javascript - 使用 JavaScript 添加/删除元素(添加/删除带有编号 ID 和名称的字段)
我有一个包含选择元素的表单，我想通过选择添加和删除其中一些元素。这是html代码(这里也有jsfiddle http://jsfiddle.net/txhajy2w/):
ios - 添加 alpha 以查看 VS 添加 alpha 到 UIColor
正在写这个: view.backgroundColor = UIColor.white.withAlphaComponent(0.9) 等同于: view.backgroundColor = UICo
Javascript 添加
好的，如果其中有任何信息，我想将这些列添加到一起。所以说我有账户 1 2 3 . 有 4 个帐户空间，但只有 3 个帐户。我如何创建 java 脚本来添加它。最佳答案 Live Example H
添加/减去数字以查找是否可以生成数字的算法？
我想知道是否有一种有效的预制算法来确定一组数字的和/差是否可以等于不同的数字。示例: 5、8、10、2，使用 + 或 - 等于 9。5 - 8 = -3 + 10 = 7 + 2 = 9 如果有一个预
Git卡在状态/添加/提交
我似乎有一个卡住的 git repo。它卡在所有基本的添加、提交命令上，git push 返回所有内容为最新的。从其他帖子我已经完成了 git gc 和 git fsck/ 我认为基本的调试步骤是
sql - 添加 where 子句会使查询速度变慢
我的 Oracle SQL 查询如下- Q1- select hca.account_number, hca.attribute3, SUM(rcl.extended_amou
iPhone:添加 UIRequiredDeviceCapability
我正在阅读 http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingG
javascript - 添加 "more"按钮
我正在尝试添加一个“加载更多”按钮并限制下面的结果，这样投资组合页面中就不会同时加载 1000 个内容，如下所示:http://typesetdesign.com/portfolio/ 我对 PHP
javascript - 添加，使用Javascript函数添加多个文本框
我遇到这个问题，我添加了 8 个文本框，它工作正常，但是当我添加更多文本框(如 16 个文本框)时，它不会添加最后一个文本框。有人遇到过这个问题吗？提前致谢。 Live Link: JAVASCRIP
javascript - 添加/删除克隆第一行默认不删除
add/remove clone first row default not delete 添加/删除克隆第一行默认不删除&并获取正确的SrNo(例如:添加3行并在看到问题后删除SrNo.2)
javascript - 添加/删除表单中的输入
我编码this ，但删除按钮不起作用。我在控制台中没有任何错误.. var counter = 0; var dataList = document.getElementById('materi
javascript - 添加/删除类似数组的对象中的元素
我有一个类似数组的对象: [1:数组[10]、2:数组[2]、3:数组[2]、4:数组[2]、5:数组[3]、6:数组[1]] 我正在尝试删除前两个元素，执行一些操作，然后将它们再次插入到同一位置。
arrays - 添加/删除单元格时保持数组排序的最佳方法
使用的 Delphi 版本:2007 你好，我有一个 Tecord 数组 TInfo = Record Name : String; Price : Integer; end; var Info
javascript - 添加/删除小部件以及调整大小不起作用
我使用了基本的 gridster 代码，然后我声明了通过按钮添加和删除小部件的函数它工作正常但是当我将调整大小功能添加到上面的代码中时，它都不起作用(我的意思是调整大小，添加和删除小部件) 我的js代
javascript - 添加/删除上一个或下一个父级中的类
title 323 323 323 title 323 323 323 title 323 323 323 JS $(document).keydown(function(e){

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用带有 javascript 的按钮添加文本并使用另一个按钮更改它