JQuery не работает кнопка события

Question

var myVar; 
     function colorChanger() { 
       myVar = setInterval(function() { 
       var r,g,b,shadow,bottom,top; 
       r = Math.floor((Math.random() * 253) + 1); 
       g = Math.floor((Math.random() * 253) + 1); 
       b = Math.floor((Math.random() * 253) + 1); 
       shadow = Math.floor((Math.random() * 20) + 5); 
       bottom = Math.floor((Math.random() * 80) + 1); 
        bbottom = Math.floor((Math.random() * 80) + 7); 
        ttop = Math.floor((Math.random() * 180) + 6); 
       top = Math.floor((Math.random() * 200) + 9); 
       size = (Math.random() * 100) + 10; 
        /* $("*").css("box-shadow",""+top+"px 0 "+shadow+"px rgb("+r+","+g+","+b+"), "+(-top)+"px 0 "+shadow+"px rgb("+r+","+g+","+b+"),0 "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"),0 "+(bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+")"); */ 
        $("#startinterval").css("bottom","50%"); 
        $("#startinterval").css("top",ttop+"px"); 
       document.getElementById("123").style.color = "rgba("+r+","+g+","+b+",0.3)"; 
       document.getElementById("123").style.textShadow = top+"px "+(bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"), "+(-top)+"px "+bottom+"px "+shadow+"px rgb("+r+","+g+","+b+"),"+top+"px "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"),"+(-top)+"px "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+")"; 
        document.getElementById("123").style.textShadow = top+"px 0 "+shadow+"px rgb("+r+","+g+","+b+"), "+(-top)+"px 0 "+shadow+"px rgb("+r+","+g+","+g+"),0 "+(-bottom)+"px "+shadow+"px rgb("+b+","+g+","+b+"),0 "+(bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+")",top+"px "+(bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"), "+(-top)+"px "+bottom+"px "+shadow+"px rgb("+g+","+r+","+b+"),"+top+"px "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+"),"+(-top)+"px "+(-bottom)+"px "+shadow+"px rgb("+r+","+g+","+b+")"; 
       document.getElementById("13").style.backgroundColor = "rgba("+b+","+r+","+g+",0.2)"; 
       document.getElementById("13").style.bottom = bottom+"%"; 
       document.getElementById("13").style.top = top+"%"; 
       document.getElementById("choosen").innerHTML = "rgb("+r+","+g+","+b+")"; 
       $("button").click(function() { 
        $("button").css({"border-radius":bottom+"px"}); 
       }); 
      }, 20); 
     } 

HTML код:

<div align="center"> 
     <h2 style="font-weight: 900;font-size: 40px, -webkit-animation-delay: 5s;"><p id="123">Random Text</p></h2> 
<button class="btn btn-info" onclick="colorChanger()" id="startinterval">start Animation</button> 
<button onclick="stopColor()">stop Animation</button> 
     </div> 

Я недавно начал с JQuery, и я очень сожалею, если это хромой вопрос. В приведенном выше коде При нажатии кнопки предполагается изменить радиус кнопки на значение «variable», но она не работает. Я пробовал использовать className, id элемента, но не повезло. Любая помощь будет оценена. Спасибо.

Answer 1

Для события запуска нажмите на кнопку, вы должны добавить ниже линии

$("button").trigger("click"); 
    $("button").click(function() { 
        $("button").css({"border-radius":bottom+"px"}); 
       }); 

Это вызовет событие щелчка на кнопке.

Answer 2

ваш код имеет синтаксическую ошибку. граница радиуса и пиксели должны быть разделены на «»

correct syntax: $("button").css("border-radius",variable+"px");

Answer 3

Разве вы не можете просто добавить другое заявление к этой функции ...

document.getElementById("[the buttons id]").style.borderRadius = '8px'; 

Нет реальной необходимости бросить JQuery в функцию без JQuery. (не то, что это проблема, просто лишняя).