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;
0

There are 0 best solutions below