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

Question

我需要将案例设置为已解决或未解决，使用按钮“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>

Answer 1

您可以结合使用 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";
  }
};