4

I'm an absolute beginner and tried to find similar questions but couldn't. Apologies if this has been answered previously. In my assignment we need to create a form with 2 text fields and 1 button. The fields are for height and width and the idea is that onclick on the button will send the 2 parameters to a function that will change the height + width attributes for a photo. I know I'm doing something wrong because the picture simply disappears. Ideas? Thanks!

<html>
    <head>
        <script>

            function borderResize(height1, width1)
            {
                document.getElementById('Amos').height = height1;
                document.getElementById('Amos').width = width1;
            }
        </script>

    </head>

    <body>

        <img src="Amos.jpg" id="Amos" />
        <form>
            <input type="text" id="height" placeholder="Height" />
            <input type="text" id="width" placeholder="Width" />
            <input type="button" value="click!" onclick="borderResize('height.value', 'width.value')"/>
        </form>
    </body>
</html>
Amos Bordowitz
  • 474
  • 6
  • 19

3 Answers3

4

When you write 

onclick="borderResize('height.value', 'width.value')"

in means that on click borderResize function will be invoked with two string arguments, literally strings "height.value" and "width.value". In your case you want something like this

onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"

In above case you are selecting element from DOM using getElementById method and then read its value property.

dfsq
  • 191,768
  • 25
  • 236
  • 258
2

You should learn to use addEventListener(), I would recommend you not to use ugly inline click handler.

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.

Here is an example with your code. 

window.onload = function() {
  document.getElementById('button').addEventListener('click', borderResize, true);
}

function borderResize() {
  document.getElementById('Amos').height = document.getElementById('height').value;
  document.getElementById('Amos').width = document.getElementById('width').value;
}
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/s200x200/11034289_10152822971918167_2916173497205137007_n.jpg?oh=71de7a46a75a946cf1d76e5ab10c1cdc&oe=55889977&__gda__=1434173455_6127f174627ed6014c84e562f47bc44c" id="Amos" />

<input type="text" id="height" placeholder="Height" />
<input type="text" id="width" placeholder="Width" />
<input type="button" id="button" value="click!" />

However as for your immediate problem you can use

onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"
Satpal
  • 132,252
  • 13
  • 159
  • 168
  • We cannot yet use things we haven't learned in class. It's stupid but that's how it is. I'll use the last line of code. Thanks! EDIT: tried it. chrome debugger now writes: Uncaught TypeError: undefined is not a function – Amos Bordowitz Feb 28 '15 at 13:47
0
onclick="borderResize('height.value', 'width.value')"

here you pass to borderResize strings: 'height.value', 'width.value'. You may get value of input from function:

function borderResize(height1, width1)
{
    document.getElementById('Amos').height = document.getElementById('height').value;
    document.getElementById('Amos').width = document.getElementById('width').value;
}
ablay keldibek
  • 16