I want to use inputElements inside wordElements. Both are declared on top of my code snippet. Solution with inside replace method is not good enough for me. I need to use them specific input fields inside them word elements. Been trying different solutions, none is working properly.
const startButton= document.getElementById("startButton");
const resultButton = document.getElementById("resultButton");
const word1Element = document.getElementById("word1");
const word2Element = document.getElementById("word2");
const word3Element = document.getElementById("word3");
const word4Element = document.getElementById("word4");
const input1Element = document.getElementById("inputOne");
const input2Element = document.getElementById("inputTwo");
const input3Element = document.getElementById("inputThree");
const input4Element = document.getElementById("inputFour");
const countElement = document.getElementById("counter");
const modalInstructionsElement = document.getElementById("instructions");
const modalResultElement = document.getElementById("result");
const modalInstructionsCloseElement = document.getElementById("instructionsClose");
const modalResultCloseElement = document.getElementById("resultClose");
let result;
function randomWords () {
word1Element.style.display = "block";
word2Element.style.display = "block";
word3Element.style.display = "block";
word4Element.style.display = "block";
const words = [
"kółko", "muzyka", "odór", "kukułka", "lupa", "buk", "półka", "kufel", "kultura", "chór",
"muzeum", "rura", "kukułka", "róg", "lufa", "łuk", "łosoś", "kurtka", "budynek",
"kukułka", "suknia", "ucho", "gorąco", "bułka", "szukanie", "podróż", "góra", "usta",
"bukiet", "klucz", "łuk", "okrągły", "ludzie", "bułka", "kruk", "król", "żuraw", "kubek",
"bukiet", "mówić", "płótno", "ludność", "kuracja", "kutia", "ubranie", "ukośny", "bukiet",
"bruk", "kultura", "ruch", "buda", "kurczak", "dusza", "łuk", "kupować", "trudność", "brud",
"skurczybyk", "słońce", "lód", "kupa", "lukier", "brud", "kusza", "tłum", "kufel", "duma",
"kupa", "pukanie", "kuracja", "burza", "kurtka", "smród", "bułka", "mur", "kultura", "buzia",
"kurczak", "kąt", "żurawina", "łuk", "kula", "ukośny", "bukiet", "turysta", "urodziny",
"kufel", "buzia", "młodzież", "kuferek", "bujny", "ucieczka", "kuracja", "kutia", "rzut",
"bukiet", "wulkan", "kucyk", "uśmiech"
];
let wordOne = words[Math.floor(Math.random() * words.length)];
let inputOne = wordOne
.replace(/[óu]/g, "<input>");
let wordTwo = words[Math.floor(Math.random() * words.length)];
let inputTwo = wordTwo
.replace("ó", " ")
.replace("u", " ");
let wordThree = words[Math.floor(Math.random() * words.length)];
let inputThree = wordThree
.replace("ó", " ")
.replace("u", " ");
let wordFour = words[Math.floor(Math.random() * words.length)];
let inputFour = wordFour
.replace("ó", " ")
.replace("u", " ");
let randomWord = `${inputOne}, ${inputTwo}, ${inputThree}, ${inputFour}`;
word1Element.innerHTML = inputOne;
word2Element.innerHTML = inputTwo;
word3Element.innerHTML = inputThree;
word4Element.innerHTML = inputFour;
return randomWord;
};
startButton.onclick = randomWords;
I did try to use input inside replace method, this solution does the job but, that's not the solution that I'm lookin for. I also did try this solution:
let wordOne = words[Math.floor(Math.random() * words.length)];
let replacedWord = '';
for (let i = 0; i < wordOne.length; i++) {
if (wordOne[i] === 'ó' || wordOne[i] === 'u') {
replacedWord += input1Element.outerHTML;
} else {
replacedWord += wordOne[i]; //
}
}
word1Element.innerHTML = replacedWord;