Member 12931605 Ответов: 1

Я пытаюсь добавить действия к кнопкам в HTML с помощью javascript


Я немного новичок в JavaScript, у меня возникли проблемы с попыткой увеличить или заставить коробку расти, просто нажав кнопку, или изменить цвет коробки на другой цвет с помощью JavaScript. Например, чтобы развернуть изображение коробки каждый раз, когда нажимается кнопка с надписью grow. Мне интересно, как связать кнопки с изображением коробки. это касается и окраски коробки. Пожалуйста, помогите, очень ценю. Спасибо.




Вот мои HTML-коды для моей веб-страницы, которые я пытаюсь улучшить с помощью Javascript:

<html>
<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
    
</head>
<body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>

    <script type="text/javascript" src="javascript.js"></script>
    

</body>
</html>


Что я уже пробовал:

Я пробовал несколько вещей, но я очень неопытен в JavaScript, что сделало эту задачу более сложной. Пожалуйста помочь. Спасибо

David_Wimbley

Опубликуйте свои фрагменты javascript и HTML, которые вы пробовали, чтобы мы могли увидеть, какой маршрут вы выбрали для своего кода. Javascript имеет смехотворное количество фреймворков, и если я опубликую код из фреймворка XYZ, это не очень поможет вам, когда вы искали, скажем...jQuery.

Member 12931605

Мое кодирование JavaScript совершенно неверно, и я уверен, что ввел неправильные коды, но это то, что у меня есть до сих пор: var content = document. getElementsById ("кнопка")
var button = document. getElementsById ("расти")
button. onclick = изменение размера функции() {
размер ВАР= документ.getElementsById("коробка");

Спасибо за ваш ответ.

P.S. Я также добавил свою HTML-кодировку в свой вопрос, надеюсь, это поможет и прояснит мой вопрос. Спасибо снова

1 Ответов

Рейтинг:
9

Peter Leow

Взгляните на демонстрационный код с помощью jQuery-библиотеки JavaScript, повеселитесь во время обучения:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#grow").click(function(){
        $("#myImg").animate({width: '+=20px'});
    });

});
</script>
</head>
<body>

<button id="grow">Zoom In!</button><br>

<img id='myImg' src='https://s-media-cache-ak0.pinimg.com/736x/d7/9e/b8/d79eb82db960906a3da0439ea5be40d5.jpg'>

</body>
</html>

Попробуйте это в JSFiddle[^]
Адаптироваться и учиться.