画布和Javascript更新rect并显示自定义文本字符串

我想让用户点击一个调整大小的按钮，它改变了一个矩形的大小，但也修改了一个文本字符串，以宣布新的大小和平方英寸以及。。。请参阅代码中的注释

html文档

<input type="button" id="increaseBoxWidth" value="Make Box Wider">
<input type="button" id="decreaseBoxWidth" value="Make Box Narrower">
<input type="button" id="increaseBoxHeight" value="Make Box Taller">
<input type="button" id="decreaseBoxHeight" value="Make Box Shorter">

然后是javascript

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded () {
    initializeThings();
}

function initializeThings() {
    ... canvas, context and such.....
    var boxWidth = 5;
    var boxHeight = 3;
    var boxSquareInches = 15;
    var message = "box is 5 inches wide and 3 inches tall... and the total square inches is 15"

... is only one "var" declared for all these listeners?

    var formElement = document.getElementById("increaseBoxWidth");
    formElement.addEventListener('click', boxWider, false);

    formElement = document.getElementById("decreaseBoxWidth");
    formElement.addEventListener('click', boxNarrower, false);

    formElement = document.getElementById("increaseBoxHeight");
    formElement.addEventListener('click', boxTaller, false);

    formElement = document.getElementById("decreaseBoxHeight");
    formElement.addEventListener('click', boxShorter, false);

    function boxWider(){
        if (boxWidth < 10) {
            boxWidth += 1;
            boxSquareInches = boxWidth * boxHeight;


        message = "Hey there... your new box size is + boxWidth + inches by + boxHeight+ inches... and the total square inches is + boxSquareInches +"

drawScreen()
        }
    }
/// THREE MORE FUNCTIONS???? FOR NARROWER, TALLER AND SHORTER????

    function drawScreen(){
        ...
        context.fillRect(0,0,boxWidth,boxHeight);
        context.fillText (message, 10, 100);
    }
}

window.addEventListener（“加载”，eventWindowLoaded，false）；
函数eventWindowLoaded（）{
初始化字符串（）；
}
函数初始化（）{
……画布、背景等等。。。。。
var-boxWidth=5；
var-boxHeight=3；
平方英寸=15；
var message=“盒子宽5英寸，高3英寸……总平方英寸为15”
…是否只为所有这些侦听器声明了一个“var”？
var formElement=document.getElementById（“increaseBoxWidth”）；
formElement.addEventListener（'click'，boxWidther，false）；
formElement=document.getElementById（“decreaseBoxWidth”）；
formElement.addEventListener（'click'，框窄，false）；
formElement=document.getElementById（“increaseBoxHeight”）；
formElement.addEventListener（'click'，box'，false）；
formElement=document.getElementById（“decreaseBoxHeight”）；
formElement.addEventListener（'click'，boxShorter，false）；
函数boxwide（）{
如果（箱宽<10）{
箱宽+=1；
方盒英寸=方盒宽度*方盒高度；
message=“嘿，你的新盒子尺寸是+boxWidth+inches x+boxHeight+inches…总平方英寸是+boxSquareInches+”
纱窗（）
}
}
///还有三个功能？？用于更窄、更高和更短？？？？
函数drawScreen（）{
...
fillRect（0,0，boxWidth，boxHeight）；
context.fillText（消息，10100）；
}
}

。。。是否只为所有这些侦听器声明了一个“var”

不，每个元素都需要用唯一的名称声明，否则，当用户单击一个按钮或另一个按钮时，程序无法区分。大概是这样的：

var iw = document.getElementById("increaseBoxWidth");
iw.addEventListener('click', boxWider, false);

var dw = document.getElementById("decreaseBoxWidth");
dw.addEventListener('click', boxNarrower, false);

var ih = document.getElementById("increaseBoxHeight");
ih.addEventListener('click', boxTaller, false);

var dh = document.getElementById("decreaseBoxHeight");
dh.addEventListener('click', boxShorter, false);

///还有三个功能？？？？对于较窄、较高和较短的

是的，那将是下一步要做的事情。就像您为

boxwide（）所做的一样

字符串上的注意事项：您需要拆分字符串，以便将变量与文本连接起来。换句话说，
+
符号和变量名不在引号内。像这样：

message = "Hey there... your new box size is" + boxWidth + "inches by" + boxHeight + "inches... and the total square inches is" + boxSquareInches;

附加说明：在JavaScript中，注释的开头是两个
/
而不是
..

希望有帮助。
这不是问题。我们不是读心术的人。请告诉我们正在发生什么和应该发生什么。