html:Button thats supposed to do create a rectangle does nothing

Question

Yes, I asked a similar question already, but I have to ask it again, 'cause I'm a slow learner.:( So the good thing is: I don't get 'a few(read:"a lot")' of Errors raining down at me. The bad thing is: I don't get anything... The button just does nothing! It's supposed to modify the size of a rectangle! I tried to make it execute this function:

function a(){
class Rectangle{
  constructor(height, width){
    this.height = height;
    this.width = width;

  function createRectangle(height, width){
    var input1 = document.getElementbyId("1stinput").value;
    var input2 = document.getElementbyId("2ndinput").value;
    var input1int = parseFloat(input1);
    var input2int = parseFloat(input2);
    const Rectangle1 = Rectangle(width="${input1int}",height="${input2int}");
    document.querySelector("#svg").setAttribute("width", parseFloat(Rectangle1.width));
    document.querySelector("#svg").setAttribute("height", parseFloat(Rectangle1.height));
};};};};

Those are the input fields for the size:

<input type="text" name="" value="" id="1stinput">
<input type="text" name="" value="" id="2ndinput">

And this is the rectangle:

<svg width=0 height=0 id="svg">
  <rect width=0 height=0 style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" id="Rectangle"/>
</svg>

Alright could someone please help me,I don't know what to do here,thanks for all the help! Bye!

Answer 1

I don't have enough rep to make comments, so this answer may be a bit of back and fourth.

I am not sure how you are executing your script, but I see a problem with closure. The constructor has no closure which will throw errors after instantiating the Rectangle class.

In order to help more I need to know how you are calling function a and instantiating the Rectangle class. As of now I see nothing instantiating the class nor how the createRectangle method within is being called. The createRectangle method will throw an error if called as it is now, as the function syntax is not valid syntax for defining methods.

For example this script throws and error:

class Foo {
    constructor(foo) {
        this.foo = foo;
    }

    function getFoo(){
        return this.foo;
    }
}

const test = new Foo("bar");

console.log(test.getFoo())

This script with correct syntax does not throw errors:

class Foo {
    constructor(foo) {
        this.foo = foo;
    }

    getFoo(){
        return this.foo;
    }
}

const test = new Foo("bar");
console.log(test.getFoo());