时间戳

首页 > 解决方案 > 将名称提交到提示后功能未运行

javascript - 将名称提交到提示后功能未运行

问题描述

在提示中输入与图像关联的正确学生姓名，但未运行“checkAnswer”功能

这是功能

            function checkAnswer() {
            if (document.getElementById('response').value == personArray[currentId].firstname) {

            //NOTE TO STUDENT: apply the class to reduce the opacity of the image, 
            //takeout the mouse events because they shouldn't be there anymore
            document.getElementById(currentId).className = "opClass";
            document.getElementById(currentId).removeAttribute("onclick");
            document.getElementById(currentId).removeAttribute("onmouseover");


            //superimpose name on image
            var divVar = document.createElement('div');
            divVar.setAttribute('id', currentId + 'name');
            document.getElementById('pic-grid').appendChild(divVar);
            var textNode = document.createTextNode(personArray[currentId].firstname);
            divVar.appendChild(textNode);
            document.getElementById(currentId + 'name').style.position = "absolute";
            document.getElementById(currentId + 'name').style.top = y;
            document.getElementById(currentId + 'name').style.left = x;

            //clean up loose ends: hide the prompt, turn the frame white so it doesn't change to aqua on the rollover, erase the response and message
            document.getElementById('prompt').style.display = 'none';
            document.getElementById(currentId).parentNode.style.backgroundColor = 'white';
            document.getElementById('response').value = "";
            document.getElementById('message').innerHTML = "";
        } else {
            if (document.getElementById('message').innerHTML == "Wrong!") {
                document.getElementById('message').innerHTML = "Incorrect answer!"
            } else {
                document.getElementById('message').innerHTML = "Wrong!"
            }
        }
        return false;
    }

基本上，如果用户在与他们选择的图像相关联的提示中输入正确的名称，则图像应该淡出（不透明）并在图像中显示学生的姓名（样式位置、顶部和左侧），或者如果他们输入在提示中告知他们错误或不正确的错误名称。一旦我输入了正确的学生姓名，提示就会消失，没有任何反应，或者如果我输入了错误的姓名，它也会消失。

这是我忘记放在这里的 populateImages 函数，抱歉。

        function populateImages() {

        for (var i = 0; i < personArray.length; i++) {
            var imageContainer = document.createElement("div");
            var image = document.createElement("img");

            imageContainer.classList.add('frame');
            image.src = personArray[i].url;

            image.setAttribute('onclick','promptForName(this)');

            image.setAttribute('onmouseover','styleIt(this)');

            image.setAttribute('onmouseout','unStyleIt(this)');

            imageContainer.appendChild(image);
            document.getElementById('pic-grid').appendChild(imageContainer);

        }
    }

这是我的 HTML：

<body onload="populateImages()">

<header>
    <h2>Class Flashcards</h2>
    <h3>Click on a student to guess their name</h3>
    <h4>Concepts: Rollovers, Opacity, Showing and Hiding Elements, Arrays of Objects, Adding and Removing Elements/Attributes Dynamically to the DOM,
        Accessing Elements using parentnode</h4>
</header>

<div id="pic-grid">
</div>

<div id="prompt">
    What is this student's name?<br>
    <form onsubmit="return checkAnswer()">
        <input type="text" id="response" name="quizInput">
    </form>
    <div id="message"></div>
</div>

</body>

表单正在通过此功能提交，并在选择图像时显示：

        function promptForName(element) {
        document.getElementById('response').value = "";
        document.getElementById('message').innerHTML = "";
        document.getElementById('prompt').style.display = 'block';
        currentId = element.id;
        x = element.offsetLeft;
        y = element.offsetTop;
        x = x + 20;
        y = y + 20;
        document.getElementById('prompt').style.position = "absolute";
        document.getElementById('prompt').style.top = y;
        document.getElementById('prompt').style.left = x;
        document.getElementById('response').focus();
    }

标签： javascriptfunction

解决方案

return false 取消提交操作。如果一切正常，您必须插入 return true

试试这个功能

function checkAnswer() {
        if (document.getElementById('response').value == personArray[currentId].firstname) {

        //NOTE TO STUDENT: apply the class to reduce the opacity of the image, 
        //takeout the mouse events because they shouldn't be there anymore
        document.getElementById(currentId).className = "opClass";
        document.getElementById(currentId).removeAttribute("onclick");
        document.getElementById(currentId).removeAttribute("onmouseover");


        //superimpose name on image
        var divVar = document.createElement('div');
        divVar.setAttribute('id', currentId + 'name');
        document.getElementById('pic-grid').appendChild(divVar);
        var textNode = document.createTextNode(personArray[currentId].firstname);
        divVar.appendChild(textNode);
        document.getElementById(currentId + 'name').style.position = "absolute";
        document.getElementById(currentId + 'name').style.top = y;
        document.getElementById(currentId + 'name').style.left = x;

        //clean up loose ends: hide the prompt, turn the frame white so it doesn't change to aqua on the rollover, erase the response and message
        document.getElementById('prompt').style.display = 'none';
        document.getElementById(currentId).parentNode.style.backgroundColor = 'white';
        document.getElementById('response').value = "";
        document.getElementById('message').innerHTML = "";
        return true; // return true if everything is ok
    } else {
        if (document.getElementById('message').innerHTML == "Wrong!") {
            document.getElementById('message').innerHTML = "Incorrect answer!"
        } else {
            document.getElementById('message').innerHTML = "Wrong!"
        }
        return false; // return false if error
    }
}

推荐阅读