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

时间：2022-05-11 08:33:41

I have the following html page that seeks to check for keywords in text input and return a score depending on how many keywords are entered. For instance, if two keywords are returned, the score would be 2, and if the answer contains no keywords, then a score of 0 would be returned.

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

In the example below two accepted keywords have been used (e.g. good and eternal) and therefore the user would receive a score of 2.

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

I've made an attempt (a beginner to JS) but would appreciate some help.

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

UPDATE: The javascript i have used nearly works (to search for multiple keywords) but doesnt display the showscore variable correctly each time.

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

This is what I have so far:

这是我到目前为止：

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

The interface is below:

界面如下：

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

Whole code that can be easily re-created below:

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

<!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>

1 个解决方案

#1

0  

To have it more dynamic, I'd use a new RegExp in which you can check the text; the length of match' result will be the score

为了让它更具动态性，我会使用一个新的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>

#1

0  

To have it more dynamic, I'd use a new RegExp in which you can check the text; the length of match' result will be the score

为了让它更具动态性，我会使用一个新的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>

标签：

相关文章