Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

jason limmm
jason limmm
8,009 Points
Posted by jason limmm
jason limmm
8,009 Points

unable to create grid and elements

i tried to make it so that when the variable randomnumber is 1 it'll set function headsortailsdecider to return H and vice versa and then after the submit button is pressed it'll input the value into the respective grid as seen with the declarations of rows and columns but the element and grid isn't appearing for some reason and there is no error in the chrome dev tools console and the console on my computer running the server

here is my js

//defining variables for convenience's sake
const rows = document.querySelector('#rows').value;
const columns = document.querySelector('#columns').value;
const rowcolumntotal = '';
const submitbutton = document.querySelector('#coingamesubmit');
const rowandcolumndiv = document.querySelector('#headsandtails');

// variable(s)/function(s) for function
const randomnumber = Math.floor(Math.random()*2)+1;
let p = '';
function headsortailsdecider() {
    if (randomnumber==1){
        return 'H';
    }else if (randomnumber == 2){
        return 'T';
    }
  }
const rowandcolumn = row +columns;


submitbutton.addEventListener('submit', ()=>{
    for (let i = 0; i < rowsandcolumn; i++) {
        if (headsortailsdecider() == H){
            const heads = rowandcolumndiv.createElement('p');
            heads.innerHTML = 'H';
        }else if (headsortailsdecider() == T){
            const tails = rowandcolumndiv.createElement('p');
            heads.innerHTML = 'T';
        }
      }
    rowandcolumndiv.style.gridTemplateRows = `repeat(${rows}, auto-fit)`;
    rowandcolumndiv.style.gridTemplateColumns = `repeat(${columns}, auto-fit)`;
});

here is my pug too just in case

    h1 Coin Game!
    h2 How many rows and columns you want?
    form
        div#rows
            label#rowlabel(for='rows') Rows:
            input#rows(type='text')
        div#columns
            label#columnlabel(for='columns') Columns:
            input#columns(type='text')
        button#coingamesubmit(type='submit') Submit

    div#headsandtails.gridwrapper
    script(src='static/js/coingamebehavior.js' type='text/js')