How do you combine two bookmarklets into one to toggle brightness?

Question

I'm looking to combine these bookmarklets into one bookmarklet for toggling image brightness by clicking the bookmarklet in the bookmarks bar:

javascript:(function(){!function(e) {e.head.appendChild(e.createElement("style"))
  .innerText = ".img,img{-webkit-filter:brightness(50%)}"}(document)})()

and:

javascript:(function(){!function(e) {e.head.appendChild(e.createElement("style"))
  .innerText = ".img,img{-webkit-filter:brightness(100%)}"}(document)})()

I tried doing it myself, but I failed since it has been a long time since I used javascript. Any help would be appreciated with either the coding or by pointing me to the right direction.

Thank you!

Answer 1

It works by pressing "+" or "-". Check it:

javascript:(function(d,b,s){s=d.head.appendChild(d.createElement("style"));d.addEventListener('keypress',function(e){if (e.key=='+'&&b<100)b+=10;else if(e.key=='-'&&b>0)b-=10;s.innerText = ".img,img{-webkit-filter:brightness("+b+"%)}"})})(document,100)

Update:

javascript:(function(d,id,b,s){s=d.getElementById(id);if (!s)d.head.appendChild(s=d.createElement("style")).id=id;b=s.brightness=150-(s.brightness || 100);s.innerText = ".img,img{-webkit-filter:brightness("+b+"%)}"})(document,"bookmarklet-brightness")