Question

我有以下html页面，该页面旨在检查文本输入中的关键字，并根据输入的关键字返回分数。例如，如果返回两个关键字，则分数为2，如果答案不包含关键字，则返回分数0。

在下面的示例中，使用了两个已接受的关键字（例如，良好和永恒），因此用户将获得2分。

我已经尝试过（JS的初学者）但是会感激一些帮助。

更新：我用过的javascript几乎可以工作（搜索多个关键字），但每次都没有正确显示showscore变量。

这是我到目前为止所做的：

<script>


document.getElementById('longanswer').addEventListener('input', function(e){
let keyword = e.target.value;
document.getElementById('greeting').innerHTML = "Just write this";
});

function displayScore() {
    var showscore = 0;
    var answer = document.getElementById('longanswer').value;
    var keyword1="eternal";
    var keyword2="good";
    var keyword3="true";

    if (answer.indexOf(keyword1)!=-1){
    showscore=showscore+1
    document.getElementById("displayscore").innerHTML = showscore;
    } else if (answer.indexOf(keyword1)!=-1 & answer.indexOf(keyword2)!=-1){
    showscore=showscore+2
    } else if (answer.indexOf(keyword1)!=-1 & answer.indexOf(keyword2)!=-1 & answer.indexOf(keyword3)!=-1){
    showscore=showscore+3
    } else {
        showscore=0
    }

document.getElementById("displayscore").innerHTML = showscore;
}



</script>

界面如下：

可以在下面轻松重新创建的整个代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Long Answer Question & Answers</title>
  </head>
  <body>
<form>
<h1> Q and A </h1>


  <div class="form-group">
    <label for="longanswer">What is the meaning of life?:</label><br>
    <textarea rows="4" cols="100" id="longanswer">
    </textarea>
    <br>
    <button onclick="displayScore()" type="button" class="btn btn-success">Submit</button>
  </div>
</form>




<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Score</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Generating a score for your answer</h5>
    <p class="card-text" id="displayscore">Once you've clicked submit we will display your score for this answer here.</p>
  </div>
</div>



    <script>


document.getElementById('longanswer').addEventListener('input', function(e){
let keyword = e.target.value;
document.getElementById('greeting').innerHTML = "Just write this";
});

function displayScore() {
    var showscore;
    var answer = document.getElementById('longanswer').value;
    var keyword1="eternal";
    var keyword2="good";


    if (answer.indexOf(keyword1)!=-1)
{
  showscore="found"
}
document.getElementById("displayscore").innerHTML = showscore;
}



</script>

Answer 1

为了让它更具动感，我会使用new RegExp来检查文字;匹配的长度'结果将是分数

let keywords = new RegExp("(" + ["foo", "bar", "baz"].join('|') + ")", 'gi');
document.getElementById('btn').addEventListener('click', e => {
  document.getElementById('score').innerHTML =
    document.getElementById('foo').value.match(keywords).length;
});

<textarea id="foo"></textarea>
<button id="btn">
Check
</button>
<div id="score">

</div>

在html中输入文本以使用javascript检查关键字并返回分数

1 个答案: