Question

我正在尝试将在字段中键入的所有字母都转换为小写。我知道这很简单，但对于我的一生来说，我无法使其正常运转。我以为如果在匹配单词功能下放置“ word-input.toLowerCase（）”，它应该使字母变为小写，但不起作用。这就是我所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<title>One Piece WordBeater</title>
</head>
<body>
    <body class="bg-dark text-white">
        <header class="bg-secondary text-center p-3 mb-5">
            <h1>One Piece Word Beater</h1>
        </header>
        <div class="container text-center">
            <!--Word & Input-->
            <div class="row">
                <div class="col-md-3 mx-auto">
                    <p class="lead">Current Level: <span class="text-info" id="levels"></span></p>
                </div>
                <div class="col-md-6 mx-auto">
                    <p class="lead">Type the Given Word Within <span class="text-success" id="seconds">5</span> Seconds. </p>
                    <h2 class="display-2 mb-5" id="current-word">luffy</h2>
                    <input type="text" class="form-control form-control-lg" placeholder="Start Typing..." id="word-input" autofocus>
                    <h4 class="mt-3" id="message"></h4>
                    <br>
                    <div class="btn-group">
                        <button type="button" class="btn btn-warning mr-5" id="start"><b>Let's Play!</b></button>
                        <button type="button" class="btn btn-danger" id="reset"><b>Reset Game</b></button>
                    </div>
               </div>
                <div class="col-md-3 mx-auto">
                        <p class="lead">High Score: <span class="text-info" id="highsocre"></span></p>
                </div>
            </div>
            <!--Time and Columns-->
            <div class="row mt-5">
                <div class="col md-6">
                    <h3>Time left: <span id="time">0</span></h3>
                </div>
                <div class="col md-6">
                    <h3>Score: <span id="score"> 0 </span></h3>
                </div>
            </div>
            <!--Instructions-->
            <div class="row mt-5">
                <div class="col md-12">
                    <div class="card card-body bg-secondary text-white">
                        <h5>Instructions</h5>
                        <p>Type each word in the given amount of seconds to score. To play again, just type the current word. Your score
                         will reset</p>
                    </div>
                </div>
            </div>
            <!--Level Selector-->
            <div class = "row mt-5">
                <div class="col md-12">
                    <div class="card card-body bg-secondary text-white">
                        <h5>Select the Difficulty</h5>
                       <div class="row mt-5">
                            <div class="col md-12">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success mr-2" id="easy">Easy</button>
                                    <button type="button" class="btn btn-primary mr-2" id="medium">Medium</button>
                                    <button type="button" class="btn btn-danger" id="hard">Hard</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="index.js"></script>
</body>
</html>

// window.addEventListener('load', init);
//Start Game
// const startbtn = document.getElementById('start');


// global Varibales

//Avaible levels
const levels = {
    easy: 5,
    medium: 3,
    hard: 2,
}

//to cchange level
const currentLevel = levels.easy;

let time = currentLevel;
let score = 0;
let isPLaying;//initalzies game...true if game is on false if game is off


//DOM Elements
const wordInput = document.querySelector('#word-input');
const currentWord = document.querySelector('#current-word');
const scoreDisplay = document.querySelector('#score');
const timeDisplay = document.querySelector('#time');
const message = document.querySelector('#message');
const seconds = document.querySelector('#seconds');
const levelDisplay = document.querySelector('#levels');

const words = [
    'luffy',
    'zoro',
    'shanks',
    'nami',
    'brook',
    'chooper',
    'sanji',
    'franky',
    'jinbe',
    'carrot',
    'pekoms',
    'ace',
    'sabo',
    'robin',
    'bellamy',
    'crocodile',
    'merry',
    'yonko',
    'camie',
    'nefertari',
    'raizo',
    'momo',
    'law',
    'dracule',
    'boa',
    'buggy',
    'golroger',
    'bigmom',
    'smoker',
    'kaido'
];

//initialize Game

// function init() {
//     //Show number of seconds
//     seconds.innerHTML = currentLevel;
//     //load a word from array
//     showWord(words);
//     //Start Matching on word input
//     wordInput.addEventListener('input', startMatch);
//     //Call countdown every second
//     setInterval(countdown, 1000);
//     //Check status
//     setInterval(checkStatus, 50)
// }


window.onload = function init() {
    //start button
    const startBtn = document.getElementById('start')
    startBtn.onclick = function() {
            //Show number of seconds
    seconds.innerHTML = currentLevel;
    //load a word from array
    showWord(words);
    //Start Matching on word input
    wordInput.addEventListener('input', startMatch);
    //Call countdown every second
    setInterval(countdown, 1000);
    //Check status
    setInterval(checkStatus, 50)
    }


}

//level Buttons

//Easy Mode
// document.getElementById('easy').addEventListener('click', easyMode);
// function easyMode(levels) {

// }

//Start Match
function startMatch() {
    if(matchWords()){
        isPLaying = true;
        time = currentLevel + 1;
        showWord(words);
        wordInput.value='';
        score++;
    }

    //if score negative -1 display 0
    if(score === -1){
        scoreDisplay.innerHTML = 0;
    }else{
        scoreDisplay.innerHTML = score;
    }

}
//Match Current Word to word imput

function matchWords(){

    if(wordInput.value === currentWord.innerHTML) {
        message.innerHTML = 'Correct!!!';
        return true;
    } else {
        message.innerHTML = '';
        return false;
    }
}

//Pick & Show random word
function showWord(words) {
    //Generate random array index
    const randIndex = Math.floor(Math.random() * words.length);
    //Output random word
    currentWord.innerHTML = words[randIndex];
}
//Countdown Timer
function countdown() {
    //Make sure time is not run out
    if(time > 0) {
        //Decrease time
        time--;
    }else if(time === 0) {
        //Game Over
        isPLaying = false;
    }
    //Show time
    timeDisplay.innerHTML = time;
}

//Check game Status
function checkStatus() {
    if(!isPLaying && time === 0){
        message.innerHTML = 'Game Over!!';
        score = -1;
    }
}

//reset after game over

Answer 1

您只需使用CSS即可

<input type="text" class="lowercase" name="input" />

并在css文件中执行

.lowercase { text-transform: lowercase }

但是，这有一个缺点。在实际情况下，发送到后端的值仍将是输入文本的值。

如果要确保将输入以小写形式发送到后端，我建议使用javascript将字符串转换为小写。

因此，在您的情况下，变量'wordInput'具有对输入元素的引用。要获得其价值，您需要做

const wordInputValue = wordInput.value;

返回在输入中输入的字符串。现在要将其转换为小写，只需执行

const wordInputValueLC = wordInput.value.toLowerCase();

Answer 2

这行是否需要更改？

if(wordInput.value === currentWord.innerHTML) {

做到

if(wordInput.value.toLowerCase() === currentWord.innerHTML) {

它应该工作，因为它将输入的单词转换为小写，然后将其与目标单词进行比较.....

打字游戏-希望所有字母都小写

2 个答案: