0

I'm just starting with coding, I'm creating a drawing using canvas with Html and JS, and want to know how to get the value of a dropdown list in JS.

I have created the list in Html using select and option, but I always get the same value, which is an option of the list but not the one I select.

I appreciate any insigths on this, I'm just starting and want to know what I can improve, thanks!

This is my Html code

<!DOCTYPE html>
<html>
<head>
    <meta charset= 'utf-8'>
    <title>Dibujo en Canvas con Ciclos</title>
    <link rel= 'stylesheet' type= 'text/css' media= 'screen' href= 'main.css'>
    <link rel= "icon" href= "Icon/favico.jpg">
</head>
<body>
    <h1>Dibujo con Ciclos</h1>
    Lines color <input type= 'color' id= 'lineColorHtml'/><br/><br/>
    Background color <input type= 'color' id= 'backgroundColorHtml' value= '#FFFFFF'/><br/><br/>
    Line width<input type= 'number' id= 'lineWidthHtml' value= '1'><br/><br/>
    Square measure <input type= 'number' id= 'canvasMeasureHtml' value= '300'><br/><br/>
    Núumber of lines <input type= 'number' id= 'linesNumberHtml' value= '30'><br/><br/>

    What do you want your drawing to be? 
    <select id= 'listHtml'>
        <option>Lines lower left</option>
        <option>Lines lower rigth</option>
        <option>Lines lower left and rigth</option>
    </select>

    <input type= 'button' id= 'buttonHtml' value= 'Dibujar'/>
    <p>Here's your drawing</p>
    <canvas id= 'canvasHtml' width= '300' height= '300'></canvas> <br/>
    <input type= 'button' id= 'clearButtonHtml' value= 'Borrar Dibujo'/>

    <script src= 'cicloConCanvas.js'></script>
</body>
</html>

Here´s my JS code

    //Get Canvas
var canvasJs= document.getElementById('canvasHtml');
var drawSpace= canvasJs.getContext('2d');

//General draw function
function drawLine(color, x1, y1, x2, y2, lineWidthCanvas){

    drawSpace.beginPath();
    drawSpace.strokeStyle= color;
    drawSpace.lineWidth= lineWidthCanvas;
    drawSpace.moveTo(x1, y1);
    drawSpace.lineTo(x2, y2);
    drawSpace.stroke();
    drawSpace.closePath();
};

function drawWhenClick(){

    //Canvas width and color
    var userLineWidth= parseInt(document.getElementById('lineWidthHtml').value);
    var userColor= document.getElementById('lineColorHtml').value;
    var userBackgroundColor= document.getElementById('backgroundColorHtml').value;

    //Canvas measure
    var userCanvasMeasure= parseInt(document.getElementById('canvasMeasureHtml').value);

    var numberOfLines= parseInt(document.getElementById('linesNumberHtml').value);
    var userDrawSelection= document.getElementById('listHtml').value;
    

    //Change canvas width
    canvasJs.setAttribute('width', userCanvasMeasure);
    canvasJs.setAttribute('height', userCanvasMeasure);

    //Draw based on selection
    if(userDrawSelection= 'Lines lower left'){
        //Lower-left drawing
        for (i= 0; i<numberOfLines; i++){

            yi= i*(userCanvasMeasure/numberOfLines);
            xf= (i+1)*(userCanvasMeasure/numberOfLines);
        
            drawLine(userColor, 0, yi, xf, userCanvasMeasure, userLineWidth);

            //contorno del canvas
            drawLine(userColor, 0, 0, 0, userCanvasMeasure, userLineWidth);
            drawLine(userColor, 0, userCanvasMeasure, userCanvasMeasure, userCanvasMeasure, userLineWidth);
        };
    }

    else if (userDrawSelection= 'Lines lower rigth'){
        //Lower-rigth drawing
        for (i= 0; i<numberOfLines; i++){

            yi= i*(userCanvasMeasure/numberOfLines);
            xf= 300-((i+1)*(userCanvasMeasure/numberOfLines));
        
            drawLine(userColor, userCanvasMeasure, yi, xf, userCanvasMeasure, userLineWidth);

            //contorno del canvas
            drawLine(userColor, userCanvasMeasure, 0, userCanvasMeasure, userCanvasMeasure, userLineWidth);
            drawLine(userColor, userCanvasMeasure, userCanvasMeasure, 0, userCanvasMeasure, userLineWidth);
        };
    }

    //Background color
    drawSpace.globalCompositeOperation= 'destination-over'
    drawSpace.fillStyle= userBackgroundColor;
    drawSpace.fillRect(0, 0, userCanvasMeasure, userCanvasMeasure);

    console.log(userDrawSelection);
};

function eraseDrawing(){

    var userCanvasMeasure= parseInt(document.getElementById('canvasMeasureHtml').value);
    drawSpace.clearRect(0, 0, userCanvasMeasure, userCanvasMeasure)

};

//Drawing and erasing buttons
var button= document.getElementById('buttonHtml').addEventListener('click', drawWhenClick);
var buttonClear= document.getElementById('clearButtonHtml').addEventListener('click', eraseDrawing);

I have tried also using changing

var userDrawSelection= document.getElementById('listHtml').value;

to

var test= document.getElementById('listHtml'); var userDrawSelection = test.options[test.selectedIndex].text;

But I get the same result, the value is "Lines lower left" no matter what I select from the list

FabgDev
  • 1
  • 1
  • The selected value is `userDrawSelection.value` – Barmar Feb 28 '22 at 20:56
  • Hi. Sorry, I think it doesn't, it may be because I'm not entirely understanding either the problem or the answer I have tried adding another variable with value= userDrawSelection.value but I still get the same value always. The value returned is always 'Lines lower left' Thanks for your help, by the way. I'm just starting, so I'm a bit confused with this, even though I know it may be simple – FabgDev Feb 28 '22 at 21:14
  • You are missing `=` sign in if statement. It has to be `==` or `===` – n1md7 Feb 28 '22 at 21:24
  • You're rigth! That was the problem, thanks a bunch, I really appreciate your response – FabgDev Feb 28 '22 at 21:30

0 Answers0