以前よりも高度なプロジェクトを作成しようとしており (このプロジェクトは単語検索ソルバーです)、これまでのところ成功していますが、垂直単語検索を実装しようとすると行き詰まりました。私は多くの配列と for ループを作成することでそれを行っていますが、それはうまく機能するため、水平方向で機能するように見えましたが、垂直方向の単語で動作するようにコードを編集する方法を実際に理解することはできません。大量の水平コードを取り除きます。単純な値を 1 つまたは 2 つ追加するだけで、非常に簡単に編集できるはずだと思いますが、これに取り組んでいる時間が長すぎて、頭が痛くなり始めています。水平方向だけでは永遠に時間がかかりましたが、おそらく非常に単純であることを知っているので、垂直方向に永遠にかかることは本当に望んでいません。私のコードは以下にあります：
var numberOfColumnsInput = document.getElementById('numberOfColumns');
var numberOfRowsInput = document.getElementById('numberOfRows');
var wordSearchParametersDiv = document.getElementById('wordSearchParameters')
var getInputs = document.getElementsByClassName('newInputs');
var allowStyling = document.getElementsByClassName('createdLetters');
var canConfirm = true;
var lettersArray = [];
var convertArrayToWords = []
var loopIterator = 0;
var originalLettersArray, createInputForWord,wordsToFindValue, originalLettersArrayLength, reverseWord, numberOfSpans;
function createInputs(){
if(canConfirm == true){
for(i=1;i<parseInt(numberOfRowsInput.value) + 1;i++){
var newInputStuff = document.createElement("input");
newInputStuff.setAttribute("type", "text");
newInputStuff.setAttribute("class", "newInputs")
newInputStuff.setAttribute("placeholder", "Enter the letters from row " + String(i))
newInputStuff.setAttribute("maxLength", numberOfColumnsInput.value);
wordSearchParametersDiv.appendChild(newInputStuff);
}
var newButton = document.createElement("button");
newButton.setAttribute("onclick", "createWordSearch()");
newButton.setAttribute("id", "newButtonId");
newButton.innerHTML = 'Confirm your letters?';
wordSearchParametersDiv.appendChild(newButton);
}
canConfirm = false;
}
function createWordSearch(){
extractLetters();
originalLettersArray = lettersArray.slice(0);
originalLettersArrayLength = originalLettersArray.length;
var numberOfRows = parseInt(numberOfRowsInput.value);
var edgeOfWordSearchPosition = parseInt(numberOfColumnsInput.value);
var createDivForSearch = document.createElement("div");
createDivForSearch.setAttribute("class", "createdRows");
var createSpanForLetter = document.createElement("span");
createSpanForLetter.setAttribute("class", "createdLetters")
for(i=0;i<numberOfRows;i++){
var numberOfRows = parseInt(numberOfRowsInput.value);
var edgeOfWordSearchPosition = parseInt(numberOfColumnsInput.value);
var createDivForSearch = document.createElement("div");
createDivForSearch.setAttribute("class", "createdRows");
wordSearchParametersDiv.appendChild(createDivForSearch);
for(j=0;j<edgeOfWordSearchPosition;j++){
console.log(lettersArray);
var createSpanForLetter = document.createElement("span");
createSpanForLetter.setAttribute("class", "createdLetters")
createSpanForLetter.innerHTML = lettersArray[0];
numberOfSpans = numberOfSpans + 1;
lettersArray.splice(0,1);
createDivForSearch.appendChild(createSpanForLetter);
}
}
createNewFindWordBox(createDivForSearch);
}
function extractLetters(){
for(i=0;i<parseInt(numberOfRowsInput.value);i++){
splitLetters = getInputs[i].value.split("");
for(j=0;j<splitLetters.length;j++){
lettersArray.push(splitLetters[j]);
}
}
}
function createNewFindWordBox(x){
createInputForWord = document.createElement('input');
var createConfirmButton = document.createElement('button');
createInputForWord.setAttribute('class', 'wordsToFind');
createInputForWord.setAttribute('placeholder', 'Enter a word to find it.')
createConfirmButton.setAttribute('id', 'confirmWordButton');
createConfirmButton.setAttribute('onClick', 'findWord()')
createConfirmButton.innerHTML = 'Confirm Word'
x.appendChild(createInputForWord);
x.appendChild(createConfirmButton);
}
function findWord(){
wordsToFindValue = createInputForWord.value;
reverseWord = createReverse(wordsToFindValue);
checkHorizontal();
checkVertical();
checkDiagonal();
checkHorizontal('reverse');
checkVertical('reverse');
checkDiagonal('reverse');
}
function createReverse(x){
var splitString = x.split("");
var reverseArray = splitString.reverse();
var joinArray = reverseArray.join("");
return joinArray;
}
//Horizontal is done for now! Bug: You can find a word that has part of it on one line and the rest on another line and it will think it found a word even though that is not how word searches work.
function checkHorizontal(x){
if(x=='reverse'){
var whatIndexWeOn = [];
for(i=0;i<(originalLettersArrayLength);i++){
for(j=0;j<wordsToFindValue.length;j++){
convertArrayToWords.push(originalLettersArray[j+i]);
whatIndexWeOn.push(j+i);
}
var makeWord = convertArrayToWords.join('');
if(makeWord == reverseWord){
console.log('found word');
for(j=0;j<wordsToFindValue.length;j++){
allowStyling[whatIndexWeOn[j]].style.backgroundColor = 'blue';
}
}
convertArrayToWords = [];
whatIndexWeOn = [];
}
}else{
var whatIndexWeOn = [];
for(i=0;i<(originalLettersArrayLength);i++){
for(j=0;j<wordsToFindValue.length;j++){
convertArrayToWords.push(originalLettersArray[j+i]);
whatIndexWeOn.push(j+i);
}
var makeWord = convertArrayToWords.join('');
if(makeWord == wordsToFindValue){
console.log('found word');
for(j=0;j<wordsToFindValue.length;j++){
allowStyling[whatIndexWeOn[j]].style.backgroundColor = 'blue';
}
}
convertArrayToWords = [];
whatIndexWeOn = [];
}
}
}
function checkVertical(x){
if(x=='reverse'){
}else{
}
}
function checkDiagonal(x){
if(x=='reverse'){
}else{
}
}#wordSearchParameters{
background-color:lightgrey;
height:50vh;
width:90vw;
}
.newInputs{
display:block;
}
.createdLetters{
padding:10px;
display:inline-block;
border:1px black solid;
height:25px;
width:25px;
}
.wordsToFind{
display:block;
}
#confirmWordButton{
display:block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Word Search Solver</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id='wordSearchParameters'>
<h1> Welcome to the Word Search Solver!</h1>
<p>Please enter the things below:</p>
<input type='number'id='numberOfColumns' placeholder='# of columns (vertical)'>
<input type='number' id='numberOfRows' placeholder='# of rows (horizontal)'>
<button id='confirmButton' onclick='createInputs()'>Confirm</button>
</div>
</center>
<script src="script.js"></script>
</body>
</html>checkVertical() 関数にはまだ何もありません。これは私が助けを必要としているものです。横書きのコードをコピペしてそこからどうすればいいのか考えてみたのですが、もっと簡単な方法があるのではないかと思います。助けてくれてありがとう！