CODEWITHSUNDEEP
javascripthtmldom-events
Samlano
Samlano

Reputation: 99

Need help on JavaScript function I have

I have a JavaScript function which changes the border radius and the opacity of an image based on user's input. Here is the JavaScript:

<script>
var input = document.getElementById('opc');
var text = document.getElementById('main');

function changeOpacity(event) {
  if ( event.keyCode === 13 ) {
    var value = input.value;
    var parts = value.split(' ');
    text.style.opacity = '0.' + value;
  }
}
input.addEventListener('keyup', changeOpacity);
</script>
<script>
var input = document.getElementById('modell');
var text = document.getElementById('image');

function changeBorderRadius(event) {
  //works with spacebar 
 if ( event.keyCode === 32 ) {
    var value = input.value;
    var parts = value.split(' ');
    text.style.borderRadius = '5' + value;
  }
}
input.addEventListener('keyup', changeBorderRadius);
</script>

And here is the HTML:

<div id = "main"><img id="image" src = "flag.gif" alt = "Flag" style = "left:0; top: 0;" /></div>
<br/>
<table border="1" style="background-color: #CCFFCC">
<tr>
<td>
Opacity Value (1 - 9)
</td>
<td>
<input type="text" id="opc" />
</td></tr>
<tr>
<td>
Border Radius (px / %)
</td>
<td>
<input type="text" id="modell" />
</td></tr>
</table>
</body>

I got the opacity thing working with the help of this Stack Overflow. :D

I tried to add another function (border function) which worked fine for me, but the opacity thing stopped working after adding this border function.

Can someone tell me what am I missing here or what is the issue?

Upvotes: 0

Views: 58

Answers (2)

Avitus
Avitus

Reputation: 15958

You have to modify your javascript a bit.

Here is a jsfiddle of it working

<script>
    function changeBorderRadius(e) {
     var key = e.which || e.keyCode || 0;
      //works with space 
     if ( key == 32 ) {
        var value = inputBoarder.value;
        var parts = value.split(' ');    
        textBoarder.style.borderRadius = parts[0] + "px";
      }
    }
    function changeOpacity(e) {
      var key = e.which || e.keyCode || 0;
      if ( key == 32 ) {   
        var value = inputOPC.value;           
        textOPC.style.opacity = '0.' + value;
      }
    }

    var inputOPC = document.getElementById('opc');
    var textOPC = document.getElementById('main');
    inputOPC.addEventListener('keyup', changeOpacity);

    var inputBoarder = document.getElementById('modell');
    var textBoarder = document.getElementById('image');
    inputBoarder.addEventListener('keyup', changeBorderRadius);
</script>

Upvotes: 1

Dhiraj
Dhiraj

Reputation: 1462

Rename variable in either script tag.

Something like input to input1

Values of variable are getting overridden

Upvotes: 0

Related Questions