Botões para criar fração

Bom dia!

De um ID para cada input, depois recupere utilizando pelo #id.

Assim , você conseguirá identificar cada input e recuperar o dado de cada um.

Bons estudos!

Opa Thiago, obrigado pela resposta.

Ainda não sei bem como fazer isso... Eu gostaria de trabalhar com esses valores no JavaScript (quero fazer um programa que mostra também frações impróprias e vou precisar manipular bastante esses valores com funções).

O meu código está abaixo. Estou tendo dificuldades em colocar os valores digitados em variáveis após o botão "Fração Escolhida" for apertado, pra poder manipular essas variáveis.

Outra dúvida é: na aula o professor disse que o "onclick" não pode ter o parênteses da função quando ela é chamada, mas e se eu quiser que a função pegue como parâmetros os valores do input como eu chamo eles?

HTML:

<meta charset="UTF-8">

<h2> Frações - Representação Visual </h2>

<p> Digite o Numerador: </p>
<input id="numerador"><br>

<p> Digite o Denominador: </p>
<input id="denominador">

<button> Fração Escolhida! </button>
<br><br>

<canvas width="600" height="400" ></canvas>

JavaScript:

<script>

    var tela = document.querySelector('canvas');    
    var pincel = tela.getContext('2d');

    var numerador = document.querySelector("numerador");

    var denominador = document.querySelector("denominador");

    var botao = document.querySelector("button");
    botao.onclick = fracao;

    function desenhaUnidade(altura) {
        pincel.fillStyle = 'white'; 
        pincel.fillRect(100, 20 + altura, 400, 30);
        pincel.fillStroke = 'black';
        pincel.strokeRect(100, 20, 400, 30);
    }

    function desenhaUnidades(numeroDeUnidades) {
        altura = 0
        for (var i = 1; i <= numeroDeUnidades; i++) {
            desenhaUnidade(altura);
            altura = altura + 50;
        }
    }

    function calculaTamanho(denominador) {
        tamanhoDaParte = 400 / denominador;
        return tamanhoDaParte;
    }

    function fracao(numerador, denominador) {
        numeroDeUnidades = (Math.trunc(numerador / denominador) + 1)
        desenhaUnidades(numeroDeUnidades)
        tamanhoDaParte = calculaTamanho(denominador);
        return tamanhoDaParte;
    }

</script>

Boa tarde!

Agora ficou mais fácil.

Altere seu script para:

<script>
    var tela = document.querySelector('canvas');    
    var pincel = tela.getContext('2d');

    var botao = document.querySelector("button");
    botao.onclick = fracao;

    function desenhaUnidade(altura) {
        pincel.fillStyle = 'white'; 
        pincel.fillRect(100, 20 + altura, 400, 30);
        pincel.fillStroke = 'black';
        pincel.strokeRect(100, 20, 400, 30);
    }

    function desenhaUnidades(numeroDeUnidades) {
        altura = 0
        for (var i = 1; i <= numeroDeUnidades; i++) {
            desenhaUnidade(altura);
            altura = altura + 50;
            }
        }

    function calculaTamanho(denominador) {
        tamanhoDaParte = 400 / denominador;
        return tamanhoDaParte;
    }

    function fracao(numerador, denominador) {
        var numerador = document.querySelector("#numerador").value;
        var denominador = document.querySelector("#denominador").value;
        numeroDeUnidades = (Math.trunc(numerador / denominador) + 1)
        desenhaUnidades(numeroDeUnidades)
        tamanhoDaParte = calculaTamanho(denominador);
        return tamanhoDaParte;
    }

</script>

O var tem que ficar dentro da função, e você precisa pegar o valor do input, com o .value.

Bons estudos!

Show Thiago! Resolveu o meu problema!!!

Segue abaixo como ficou o código finalizado. Ficou meio bagunçado, mas acho que quando eu chegar na parte de orientação a objetos vai dar pra refatorar a função e deixar mais organizado :)

Também não sei como limpar a tela depois de testar uma função, mas já fiquei muito feliz com o resultado (mesmo tendo que carregar a página depois de fazer cada função).

O legal é fazer o teste com frações impróprias (por exemplo 13/3).

<meta charset="UTF-8">

<h2> Frações - Representação Visual </h2>

<p> Digite o Numerador: </p>
<input id="numerador"><br>

<p> Digite o Denominador: </p>
<input id="denominador">

<button> Fração Escolhida! </button>
<br><br>

<canvas width="600" height="400" ></canvas>

<script>

    var tela = document.querySelector('canvas');    
    var pincel = tela.getContext('2d');

    var botao = document.querySelector("button");
    botao.onclick = fracao;


// Essa função calcula o tamanho de cada parte do inteiro (denominador)

    function calculaTamanho(denominador) {
        tamanhoDaParte = 400 / denominador;
        return tamanhoDaParte;
    }


//As próximas duas funções desenham a unidade

    function desenhaUnidade(altura) {
        pincel.fillStyle = 'white'; 
        pincel.fillRect(100, 20 + altura, 400, 30);
        pincel.fillStroke = 'black';
        pincel.strokeRect(100, 20 + altura, 400, 30);
    }

    function desenhaUnidades(numeroDeUnidades) {
        altura = 0
        for (var i = 1; i <= numeroDeUnidades; i++) {
            desenhaUnidade(altura);
            altura = altura + 50;
        }
    }


//As próximas duas funções desenham os denominadores

    function desenhaDenominadores(numeroDeUnidades, tamanhoDaParte, denominador) {
        var altura = 0
        for (var i = 1; i <= numeroDeUnidades; i++) {
            quadradoDenominador(altura, tamanhoDaParte, denominador);
            altura = altura + 50;
        }
    }

    function quadradoDenominador(altura, tamanhoDaParte, denominador){
        var x = 0;
        for (var i = 1; i <= denominador; i++) {
            pincel.fillStyle = 'white'; 
            pincel.fillRect(100 + x, 20 + altura, tamanhoDaParte, 30);
            pincel.fillStroke = 'black';
            pincel.strokeRect(100 + x, 20 + altura, tamanhoDaParte, 30);
            x = x + tamanhoDaParte;
        }
    }


//As três funções desenham os numeradores

    function desenhaNumeradores(numeroDeUnidades, tamanhoDaParte, denominador, resto) {
        var altura = 0
        for (var i = 1; i < numeroDeUnidades; i++) {
            quadradoNumerador(altura, tamanhoDaParte, denominador);
            altura = altura + 50;
        }
        quadradoResto(altura, tamanhoDaParte, resto);
    }


    function quadradoNumerador(altura, tamanhoDaParte, denominador){
        var x = 0;
        for (var i = 1; i <= denominador; i++) {
            pincel.fillStyle = 'blue'; 
            pincel.fillRect(100 + x, 20 + altura, tamanhoDaParte, 30);
            pincel.fillStroke = 'black';
            pincel.strokeRect(100 + x, 20 + altura, tamanhoDaParte, 30);
            x = x + tamanhoDaParte;
        }
    }

    function quadradoResto(altura, tamanhoDaParte, resto){
        var x = 0;
        for (var i = 1; i <= resto; i++) {
            pincel.fillStyle = 'blue'; 
            pincel.fillRect(100 + x, 20 + altura, tamanhoDaParte, 30);
            pincel.fillStroke = 'black';
            pincel.strokeRect(100 + x, 20 + altura, tamanhoDaParte, 30);
            x = x + tamanhoDaParte;
        }
    }


//Função principal

    function fracao(numerador, denominador) {
        var numerador = parseInt(document.querySelector("#numerador").value);
        var denominador = parseInt(document.querySelector("#denominador").value);

        var numeroDeUnidades = (Math.trunc(numerador / denominador) + 1)

        var tamanhoDaParte = calculaTamanho(denominador);    

        var resto = numerador % denominador

        var resto = numerador % denominador;

        desenhaUnidades(numeroDeUnidades);
        desenhaDenominadores(numeroDeUnidades, tamanhoDaParte, denominador);
        desenhaNumeradores(numeroDeUnidades, tamanhoDaParte, denominador, resto);

    }

</script>