Question

我有一些简单的HTML代码

<textarea id="text" placeholder="Type text...."></textarea>
<a id="button" class="button"></a>
<textarea id="result" disabled></textarea>

我有一个JavaScript代码

function getFrequency(string) {
    var freq = {};
    for (var i=0; i<string.length;i++) {
        var character = string.charAt(i);
        if (freq[character]) {
           freq[character]++;
        } else {
           freq[character] = 1;
        }
    }

    return freq;
};

我只想将js与HTML集成在一起以计算id =“ text”的textarea内部的每个字符频率，并通过id =“ result”的textarea内部显示结果。我尝试使用

document.getElementById("text").value;

，但是出了点问题，仍然无法正常工作。有什么方法可以轻松做到这一点？

Answer 1

使用spread syntax，Map，Array#reduce和String#split

const textArea = document.getElementById("text");
const button = document.getElementById("button");
const result = document.getElementById("result");

button.addEventListener("click", function(){
  const value = textArea.value.trim();
  const res = getFrequency(value);
  console.log(JSON.stringify([...res]));
  result.innerText = `(${[...res].join("), (")})`;
})

function getFrequency(str){
  return str.split("").reduce((a,c)=>a.set(c, (a.get(c) || 0) + 1), new Map());
}

div {
  display: flex;
  background-color: lightgrey;
  flex-direction: column;
}

div > div {
  flex-direction: row;
}

<div>  
  <textarea id="text" placeholder="Type text....">
      Some text to check the count of characters
  </textarea>
  <div>
  <button id="button" class="button">Click me</button>
  <p id="result"></p>
  </div>
</div>

Answer 2

如果您想在键入时进行操作，则可以通过以下方式在文本区域上使用keyup事件

function getFrequency(string) {
    var freq = {};
    for (var i=0; i<string.length;i++) {
        var character = string.charAt(i);
        if (freq[character]) {
           freq[character]++;
        } else {
           freq[character] = 1;
        }
    }

    return freq;
};

window.addEventListener('load', function() {
  const textbox = document.getElementById('text');
  const result = document.getElementById('result');
  
  textbox.addEventListener('keyup', function() {
    const frequency = getFrequency( textbox.value );
    result.value = Object.keys( frequency ).map( key => `${key}: ${frequency[key]}` ).join('\n');
  });
});

<textarea id="text" placeholder="Type text...."></textarea>
<a id="button" class="button"></a>
<textarea id="result" disabled></textarea>

如果要在单击按钮时执行此操作，则可以这样更改以前的代码：

document.getElementById('button').addEventListener('click',  function() {
  const frequency = getFrequency( textbox.value );
  result.value = Object.keys( frequency ).map( key => `${key}: ${frequency[key]}` ).join('\n');
});

Answer 3

这应该做到。

function getFrequency(string) {
    var freq = {};
    for (var i=0; i<string.length;i++) {
        var character = string.charAt(i);
        if (freq[character]) {
           freq[character]++;
        } else {
           freq[character] = 1;
        }
    }

    return freq;
};

document.getElementById('myButton').onclick = function(){
  var str = document.getElementById('text').value;
  var result = getFrequency(str);
  document.getElementById('result').value = JSON.stringify(result);
}

<textarea id="text" placeholder="Type text...." ></textarea>
<button id="myButton" class="button">Count</button>
<textarea id="result" disabled></textarea>

如何使用javascript

3 个答案: