diff --git a/src/app/components/gameRules.js b/src/app/components/gameRules.js index 5f29550..e216fb8 100644 --- a/src/app/components/gameRules.js +++ b/src/app/components/gameRules.js @@ -29,7 +29,7 @@ function renderRules(mode) { attachRankingButtonCallback(); // Remove children of swquiz-game-body - let gameBodyElement = document.getElementById('swquiz-game-body'); + let gameBodyElement = document.querySelector('#swquiz-game-body'); gameBodyElement.innerHTML = ''; // Render rules for selected mode diff --git a/src/app/components/mainWindow.js b/src/app/components/mainWindow.js index d58c44d..0162a14 100644 --- a/src/app/components/mainWindow.js +++ b/src/app/components/mainWindow.js @@ -11,7 +11,7 @@ import { getImage } from '../logic/generatingQuestions/gettingImage' export const playerAnswers = []; export const computerAnswers = []; function fillMainWindowHTML() { - let quizBody = document.getElementById('swquiz-body'); + let quizBody = document.querySelector('#swquiz-body'); let quizGame = createDiv('swquiz-game', 'swquiz-game'); let quizGameHeader = createDiv('swquiz-game-header', 'swquiz-game-header'); @@ -40,7 +40,7 @@ function fillMainWindowHTML() { async function mainWindow(maxTime) { fillMainWindowHTML(); - mainMenu(document.getElementById('swquiz-header'), setGameMode); + mainMenu(document.querySelector('#swquiz-header'), setGameMode); redButton('play the game'); whiteButton('Hall of fame'); diff --git a/src/app/components/ranking.js b/src/app/components/ranking.js index bdc5007..620dd3e 100644 --- a/src/app/components/ranking.js +++ b/src/app/components/ranking.js @@ -48,7 +48,7 @@ function createRankingHeader() { } function ranking(scoreList) { - let parent = document.getElementById('swquiz-game-body'); + let parent = document.querySelector('#swquiz-game-body'); let ranking = createDiv('box', 'ranking-box'); @@ -77,7 +77,7 @@ function renderRanking(mode) { attachRulesButtonCallback(); // Remove children of swquiz-game-body - let gameBodyElement = document.getElementById('swquiz-game-body'); + let gameBodyElement = document.querySelector('#swquiz-game-body'); gameBodyElement.innerHTML = ''; // Render ranking for selected mode diff --git a/src/app/gameMode.js b/src/app/gameMode.js index 7f07f2a..37c9549 100644 --- a/src/app/gameMode.js +++ b/src/app/gameMode.js @@ -7,7 +7,7 @@ export const STARSHIPS_MODE_QUESTION_STRING = 'MODE: Do you recognize this starship?'; export const gameMode = (text) => { - const app = document.getElementById('swquiz-game-header'); + const app = document.querySelector('#swquiz-game-header'); const questionDiv = document.createElement('div'); questionDiv.id = 'question'; diff --git a/src/app/imageRecognizer.js b/src/app/imageRecognizer.js index e76a905..c90465c 100644 --- a/src/app/imageRecognizer.js +++ b/src/app/imageRecognizer.js @@ -1,5 +1,5 @@ export const imageRecognizer = (img) => { - const app = document.getElementById('swquiz-body'); + const app = document.querySelector('#swquiz-body'); const imageElement = document.createElement('img'); //btoa('string') - encode a string //function decodes a string of data which has been encoded using Base64 encoding. diff --git a/src/app/modes.js b/src/app/modes.js index 6cfeb54..4d04d34 100644 --- a/src/app/modes.js +++ b/src/app/modes.js @@ -23,7 +23,7 @@ export function getGameMode() { } function changeRules(mode) { - let ruleBox = document.getElementById('game-rules-box'); + let ruleBox = document.querySelector('#game-rules-box'); if (ruleBox) { let p = ruleBox.getElementsByTagName('p')[1]; // first one is header @@ -32,7 +32,7 @@ function changeRules(mode) { } function changeRanking(mode) { - let rankingBox = document.getElementById('ranking-box'); + let rankingBox = document.querySelector('#ranking-box'); if (rankingBox) { renderRanking(mode); @@ -40,7 +40,7 @@ function changeRanking(mode) { } function changeQuestion(mode) { - let questionElement = document.getElementById('question'); + let questionElement = document.querySelector('#question'); if (questionElement) { questionElement.innerHTML = getGameModeQuestion(mode); diff --git a/test/app/components/mainWindow.test.js b/test/app/components/mainWindow.test.js index 299c5e6..b7b7654 100644 --- a/test/app/components/mainWindow.test.js +++ b/test/app/components/mainWindow.test.js @@ -12,26 +12,25 @@ test('screen shows main window with rules', () => { mainWindow(); // Test against menu - expect(document.getElementById('swquiz-header')).toBeTruthy(); - expect(document.getElementById('menuContainer')).toBeTruthy(); + expect(document.querySelector('#menuContainer')).toBeTruthy(); // Test against game body - expect(document.getElementById('swquiz-body')).toBeTruthy(); + expect(document.querySelector('#swquiz-body')).toBeTruthy(); // Game question - expect(document.getElementById('swquiz-game-header')).toBeTruthy(); - expect(document.getElementById('question')).toBeTruthy(); + expect(document.querySelector('#swquiz-game-header')).toBeTruthy(); + expect(document.querySelector('#question')).toBeTruthy(); // Game rules - expect(document.getElementById('swquiz-game-body')).toBeTruthy(); + expect(document.querySelector('#swquiz-game-body')).toBeTruthy(); // Game white button - expect(document.getElementById('swquiz-game-footer-left')).toBeTruthy(); - expect(document.getElementById('white-button')).toBeTruthy(); + expect(document.querySelector('#swquiz-game-footer-left')).toBeTruthy(); + expect(document.querySelector('#white-button')).toBeTruthy(); // Game red button - expect(document.getElementById('swquiz-game-footer-right')).toBeTruthy(); - expect(document.getElementById('red-button')).toBeTruthy(); + expect(document.querySelector('#swquiz-game-footer-right')).toBeTruthy(); + expect(document.querySelector('#red-button')).toBeTruthy(); // Left Image expect(screen.getByTestId('imgRecognizer')).toBeTruthy();