Question

有谁能告诉我，我在这里做什么？我是Javascript的新手，我无法按照我想要的方式运行此功能。基本上如果我在number1字段中键入ABCJ，我想在ansarea中显示123X

<!DOCTYPE html>
<html>
<body>

<script>
function convert(number1)
{
     for(var i=0;i<number1.length();i++)
        {
      if(number1[i]=='A')
        {
            document.getElementById("ansarea").innerHTML="1";
        }
       else if(number1[i]=='B')
            {
            document.getElementById("ansarea").innerHTML="2";
        }
      else if(number1[i]=='C')
        {
            document.getElementById("ansarea").innerHTML="3";
        }
      else if(number1[i]=='D')
        {
            document.getElementById("ansarea").innerHTML="4";
        }
      else if(number1[i]=='E')
        {
            document.getElementById("ansarea").innerHTML="5";
        }
      else
            {
            document.getElementById("ansarea").innerHTML="x";
        }
    }
 }

</script>

<form>Enter here : <input type="text" name="number1"><br></form>

<button type="button" onclick="convert("number1")">Convert</button>

<div id="ansarea"><input type="text" name = "ans"></div>

</body>

</html>

Answer 1

这会让你的代码工作......

<!DOCTYPE html>
<html>
<body>

<script>
function convert() {
    var valu = document.getElementById("some").value;
    document.getElementById("ansarea").innerHTML = "";
    for (var i = 0; i < valu.length; i++) {
        if (valu[i] == 'A') {
            document.getElementById("ansarea").innerHTML += "1";
        } else if (valu[i] == 'B') {
            document.getElementById("ansarea").innerHTML += "2";
        } else if (valu[i] == 'C') {
            document.getElementById("ansarea").innerHTML += "3";
        } else if (valu[i] == 'D') {
            document.getElementById("ansarea").innerHTML += "4";
        } else if (valu[i] == 'E') {
            document.getElementById("ansarea").innerHTML += "5";
        } else {
            document.getElementById("ansarea").innerHTML += "x";
        }
    }
}
</script>

<form>Enter here : <input type="text" name="number1" id="some"><br>

<button type="button" onclick="convert()">Convert</button>

<div id="ansarea"></div>
</form>

</body>

</html>

enter image description here

您不需要将值传递给convert()，因为您从输入字段获取值，您不需要其他输入字段，因为您将文本放在div中。

Answer 2

这是另一个工作示例：

<!DOCTYPE html>
<head>
<script>
function convert()
{

     var number1 = document.getElementById('textbox_id').value;

     for(var i=0;i<number1.length;i++)
        {
      if(number1.charAt(i)=='A')
        {
            document.getElementById("ansarea").innerHTML +="1";
        }
       else if(number1.charAt(i)=='B')
            {
            document.getElementById("ansarea").innerHTML +="2";
        }
      else if(number1.charAt(i)=='C')
        {
            document.getElementById("ansarea").innerHTML +="3";
        }
      else if(number1.charAt(i)=='D')
        {
            document.getElementById("ansarea").innerHTML +="4";
        }
      else if(number1.charAt(i)=='E')
        {
            document.getElementById("ansarea").innerHTML +="5";
        }
      else
            {
            document.getElementById("ansarea").innerHTML +="x";
        }
    }
 }

</script>
</head>
<body>
Enter here : <input type="text" name="number1" id='textbox_id'>
</br>

<button type="button" onclick="convert()">Convert</button>

<div id="ansarea"></div>

</body>

</html>

这里很少有人注意到：

您可以从函数convert()
在<html>

<!DOCTYPE html>

最好不要跳过<head>标记
对于此任务，具体而言，您不需要<form>，因此我已将其删除，但如果您计划提交其他某种方法或其他内容，则可以添加它...

Answer 3

首先，欢迎使用javascript！因为你正在开始，一个好的经验法则就是找到重复的方法。

以下是另一个关于如何使用地图执行与其他答案完全相同的事情的示例：

// let's map all the characters you need against some digits
// this will make it super easy to add, remove or swap things around.
var map = { A: '1', B: '2', C: '3', D: '4', E: 5 };

// for example, map['A'] will now have the value of '1'

// we can store the output element once for good, 
// so you don't have to look it up over and over again. 
var outputElement = document.getElementById('ansarea'); 

function convert( inputString ) {

    // the result variable will temporary store the result, so let's start empty
    var result = "";

    for ( var i = 0; i < inputString.length; i ++ ) {

        // grab the current character so we don't have to look it up twice
        var char = inputString[i];

        if ( typeof map[char] !== 'undefined' ) {

            // cool, the character existed within the map. 
            // We can append its value to the result:
            result += map[char];

        } else {

            // ... if not add 'x'
            result += 'x';
        }
    }
    // and finally, populate the HTML with the result
    outputElement.innerHTML = result;
}

Answer 4

innerHTML - 它是在元素中包含html的属性。每次你完全重写它。试试这个： document.getElementById("ansarea").innerHTML+="1"; document.getElementById("ansarea").innerHTML+="2"; // etc 通过+=（而不是=），您将旧值与新值连接。

你必须改变你的函数调用。试试这个（我不测试它）：

 function convert(selector) {
    var dataFromInput = document.querySelector(selector);
    var dataLength = dataFromInput.length();

    var ansarea = document.getElementById("ansarea");

    for(var i = 0; i < dataLength; i++) {

        switch (dataFromInput[i]) {
            case 'A':
                ansarea.innerHTML += '1';
                break;
            case 'B':
                ansarea.innerHTML += '2';
                break;
            case 'C':
                ansarea.innerHTML += '3';
                break;
            case 'D':
                ansarea.innerHTML += '4';
                break;
            case 'E':
                ansarea.innerHTML += '5';
                break;
            default:
                ansarea.innerHTML += 'x';
        }
    }
}

并为输入添加id：

<form>Enter here : <input type="text" name="number1" id="number1"><br></form> <button type="button" onclick="convert('#number1')">Convert</button>

使用if else语句的函数--javascript

4 个答案: