无法通过下拉菜单获取 select 标签的值

Question

我已经使用 FabricJS 几天了，我在获取下拉菜单的值时遇到了问题，因此我可以通过“点击”事件监听器正确应用所需的形状。所以当我点击下拉菜单和 select“矩形”并点击按钮，它应该生成一个矩形。这是我的代码：

HTML:

   <p>Choose a Shape</p>

<select id="shapesId">
    <option value="square">Square</option>
    <option value="rectangle">Rectangle</option>
    <option value="triangle">Triangle</option>
    <option value="circle">Circle</option>
    <option value="polygon">Polygon</option>
    <option value="ellipse">Ellipse</option>
    <option value="line">Line</option>
</select>

<button id="realShapes">Go!</button>

所以当我们点击“开始！”我想通过形状选项获得 selected 的任何值。现在这是我的 Javascript:

const shapes = document.getElementById("shapesId");
const e = shapes.value;
const clickShapes = document.getElementById("realShapes");
clickShapes.addEventListener("click", () => {
    
    if(e === "Rectangle") {
      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'black',
        width: 70,
        height: 70,
        angle: 45
    });
    canvas.add(rect);
    }
    
    canvas.renderAll();
})

我现在很迷茫，几个小时以来一直在努力解决这个问题，如有任何帮助，我们将不胜感激。感谢阅读本文的人！

Answer 1

尝试使用它来获取所选的 shapesid 值（会将值存储到 xvalue）：

var xvalue  = document.getElementById("shapesId").options[document.getElementById("shapesId").selectedIndex].value;

附加信息（您可以使用以下内容作为可行示例）：

<canvas id="myCanvas" width="400" height="400"
style="border:1px solid #ff0000;">
</canvas>

<br>

<p>Choose a Shape</p>

<select id="shapesId">
    <option value="">Please select</option>
    <option value="rectangle">rectangle</option>
    <option value="circle">circle</option>
</select>

<input type=button value="DRAW" onclick="javascript:draw();">





<script>

function draw() {

var xvalue  = document.getElementById("shapesId").options[document.getElementById("shapesId").selectedIndex].value;

if (xvalue=="rectangle")  {

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 400, 400);


var ctx = c.getContext("2d");
//ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
}

if (xvalue=="circle")  {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 400, 400);

var ctx = c.getContext("2d");
//ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
}
}


</script>

无法通过下拉菜单获取 select 标签的值

Having trouble grabbing value of select tag with dropdown

javascript

select

click

fabricjs

addeventlistener