使用 Javascript 和字符串插值更改 html 元素的类

Question

I have a HTML element with the id of "bigOne". Its size is determined by its class and the associated CSS. The class names are "p1", "p2", "p3", etc, all the way up to "p100".

One the page is an input and a button. I am trying to create a function so that when a number is typed in the input and the button clicked that the class of the "bigOne" is changed to the corresponding number, eg when 80 is entered and the button clicked the class changed from "p50" to "p80". In my code below I have been able to create this exact scenario but what I want to be able to do is be able to type in any number and change the class appropriately, eg submitting 4 creates the class p4 or submitting 99 creates the class p99. This is where I have come completely stuck.

Im am sure there isn't too much code required but I just can not get it.

<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

Since you tag your question with 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

I suggest that you fetch the value of the element where the number is put in, and store it into the string below called "theNewClassName":

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

Or

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

You get the idea.