Javascript-форум - Кнопка для изменения width

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Кнопка для изменения width (https://javascript.ru/forum/events/55209-knopka-dlya-izmeneniya-width.html)

Кнопка для изменения width

Добрый день всем! Скажу честно, я почти полный профан в js и буду очень рад если вы поможете мне решить маленькую, как я понимаю, задачу.
Мне нужно сделать кнопку, которая, при нажатии на нее изменяла бы (увеличивала) ширину div'а, причем, ширина - в процентах идет. Ну, и кнопка, возвращающая все к исходному состоянию не помешала бы)
Вот все, что я смог сделать:
<input value="Нажми меня" onclick="document.getElementById("ID").style.width = "150%"" type="button">
Но я понимаю, что тут все неправильно, скорее всего)
Буду рад, если Вы поможете мне.

<html>
<head>
</head>

<body>

<div id="resizable" style="width: 10%; height: 10%; background: red"></div>
<button onclick="resize()">resize</button>
<button onclick="unResize()">unresize</button>


<script>
resize=function(){
 with(resizable.style){width="20%"; height="20%"}
}
unResize=function(){
 with(resizable.style){width="10%"; height="10%"}
}

</script>

</body>
</html>

xobglor,
внутри двойных кавычек одинарные и наоборот

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
    width: 5%;
    height: 100px;
    background-color: #32CD32;
  }

  </style>
</head>

<body>
<div id="test"></div>
<input value="Нажми меня" onclick="document.getElementById('test').style.width = document.getElementById('test').style.width ? '':'150%'" type="button">
</body>

</html>

Спасибо большое, знатоки!) а можно сделать так, чтобы увеличивалось при нажатии на, скажем, десять процентов. и кнопку, которая возвращала бы к исходному варианту? Я так понимаю, что js видит процентное значение как текст и функцию сложения применить не удастся? надо что-ли будет как-то преобразовывать текст в число?

хотя, конечно, можно использовать способ theKingOfJava, используя много кнопок для кадого варианта масштаба....

xobglor,
изучите документацию хотя бы минимально
http://learn.javascript.ru/

храните число - число увеличивайте а в стиль пишите строку число+"%"

<html>
<head>
<style>
 .resizable{background: red}
</style>
</head>
 
<body>
 
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>

<button id="resizeAbsolute10">absolute resize 10%</button>
<button id="resizeAbsolute20">absolute resize 20%</button>
<button id="resizeRelative10">relative resize 10%</button>
<button id="resizeRelative20">relative resize 20%</button>
<button id="default_">default</button>
 
 
<script>

defaults=[10, 20, 30]
resizables=document.querySelectorAll(".resizable")

resizeAbsolute=function(percent){
 return function(){
   [].forEach.call(resizables, function(el, i){
     with(el.style){width=(defaults[i]+percent)+"%"; height=(defaults[i]+percent)+"%"}
   })
  }
}
resizeRelative=function(percent){
 return function(){
  [].forEach.call(resizables, function(el){
    with(el.style){width=(parseInt(width)+percent)+"%"; height=(parseInt(height)+percent)+"%"}
  })
 }
}

resizeAbsolute10.onclick=resizeAbsolute(10)
resizeAbsolute20.onclick=resizeAbsolute(20)
resizeRelative10.onclick=resizeRelative(10)
resizeRelative20.onclick=resizeRelative(20)
default_.onclick=resizeAbsolute(0)
resizeAbsolute(0)()

</script>
 
</body>
</html>