Cant get a text box to make an image bigger Javascript

JavaScript
1

i got this question in college and dont know what to do to get it work

Capture
Capture1278Ă—666 25 KB

2

I don’t see any question there…

3

Sorry forgot to add it, there it is

image

4

There still doesn’t seem to be any question there.

You said that you got a question. What question do you have about it? <= a question

5

I dont know how to finish the code off, the screenshot is my attempted of the question i replied with.

i know i have height for both my function the changed it and it doesn’t work

6

I’m guessing this is a task assigned for the learning experience. i.e. in list form:

  1. Create a form
    • with an image,
    • a button called “Resize”
    • and a textbox.
      • Use the textbox to take in a number.
  2. When the user clicks the “Resize” button,
    1. get the number from the textbox
    2. and set the width and height of the image to that value (in pixels).

Step one is HTML, step two is JavaScript. In order for the JavaScript to work without out any unexpected bugs it is important to have good HTML.

Sorry, but I don’t have the patience ATM to transcribe the HTML from the image into text so it can be worked with. If you paste the HTML for that page into the validator

you will get error and warning messages indicating what should be fixed before proceeding.

Please do the best you can with that and post the improved HTML (not a image please) here when done.

1 Like
8

Thats what i have so far

<!doctype html>
<html lang="en">
<head>
    
<meta charset="utf-8">
    <title>Calculate</title>
   
    <script src="question1.js"></script>

</head>
<body>

<input type="button" id="but1" ondblclick="changeTextbox()" value="change"/>
<br/><br/>
<form name="resize">
    width:<input type="text" id="Lsize" size="3"/>
    <br>
    height:<input type="text" id="Wsize" size="3">
    <br><br>
    <img src="https://via.placeholder.com/100" alt="filler img" >
    
   
    <br>
    <br>

    
    <br>
    
</form>


    
</body>

</html>
9

theres the js

function changeTextbox()
{
	
	var x = document.getElementById('size');
	
	x.style.height = Lsize + "px";
	x.style.width = Wsize + "px";
	
}
10

I see you have two text inputs, one for height and one for width. My read of the specifications is “a textbox [sic text input] … the number from the textbox” is that there should be only one not two text inputs. (by definition the dimensions would be a square)

It might be acceptable to have separate text inputs, but doing so introduces a bit of complexity that might be better to avoid for the time being.

I recommend you try to be more attentive to naming, inconsistencies can and have been known to cause problems for many devs many times. eg.

  • button value “change” instead of “Resize” likely not that important
  • an input labeled width with an id “Lsize”
  • an input labeled height with an id “Wsize”

“width” - “L” and “height” - “W” would confuse me. Indeed, the JavaScript
getElementById('size')
there is no HTML element with an id “size”, anyway,

x.style.height = Lsize + "px"; 
x.style.width = Wsize + "px";

the style height is being assigned the value of a nonexistent “Lsize” variable, I assume the intention is connected to the width input with the id Lsize.

the style width is being assigned the value of a nonexistent “Wsize” variable, I assume the intention is connected to the height input with the id Wsize.

But don’t worry about all that for now. If you change the HTML to have only a single text input (because it is for a square I would label it “side”, but use what makes sense to you)

To “get” the value of the input and “get” the image element, it could then be something like this

side: <input type="text" id="side" value="" /> 
... 
<img ... id="test_image" /> 

const size = document.getElementById('side'); 
const image = document.getElementById('test_image'); 

image.style.height = size.value + "px";
image.style.width = size.value + "px";

Does that make sense so that you can see what is being done?

2 Likes
11

Ya thanks makes sense

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.