Javascriptと文字列補間を使用してhtml要素のクラスを変更する

Question

idが "bigOne"のHTML要素があります。そのサイズは、そのクラスと関連するCSSによって決まります。クラス名は、「p1」、「p2」、「p3」など、「p100」までです。

ページは入力とボタンの1つです。私は、入力に数字が入力され、ボタンがクリックされたときに "bigOne"のクラスが対応する数字に変更されるように関数を作成しようとしています。 80が入力され、ボタンがクリックされると、クラスは「p50」から「p80」に変更されました。下のコードでは、この正確なシナリオを作成することができましたが、何ができるようにするには、任意の数値を入力し、クラスを適切に変更することができます。 4を提出するとp4が作成され、99を提出するとp99が作成されます。これは私が完全に立ち往生したところです。

コードはあまり必要ないと確信していますが、私はそれを得ることができません。

<div id="options"> 
       <label></label> 
       <input id="changes" /> 
       <button id="myButton">Submit</button> 
      </div> 

      <script type="text/javascript"> 

       document.getElementById("myButton").onclick=function() { 

        if (document.getElementById("changes").value=="80") { 


         document.getElementById("bigOne").classList.contains('p50'); 

         document.getElementById("bigOne").classList.toggle('p80'); 

        } 


       } 







      </script> 

Answer 1

あなたはjQueryを使ってあなたの質問にタグを付けるので...：

<script> 

    $(function(){ 
     $('#myButton').click(function(){ 
      $('#bigOne').removeClass(); //to clean old classes 
      //we get the value from the input and add the p class 
      $('#bigOne').addClass('p'+$('#changes').val()); 
     }); 
    }); 
</script> 

Answer 2

私はあなたが数を入れている要素の値を取得し、呼ばれる以下の文字列にそれを格納することを示唆しています"theNewClassName"：

var theNewClassName = document.getElementById("elementToTakeValueFrom").innerHTML; 
document.getElementById("elementToGiveClassTo").className = theNewClassName; 
//or whatever classname you wanted it to change to 

それとも

document.getElementById("bigOne").className = "blablabla"; 

あなたは考えを得る。