Question

我正在设计一个页面，可以在用户做出选择时显示分数。

但是，此代码似乎无效，并且未在“得分”中显示任何结果。领域。我的Html代码：

<tr>
  <td>
    <div>
      <input list="typeList" name="type" id="type">
      <datalist id="typeList">
        <option value="basketball">
        <option value="soccer">
        <option value="table tenis">
      </datalist>
    </div>
  </td>

  <td><input type="text" id="score" name="score" autocomplete="off"></td>
</tr>

我的脚本如下：

var type = document.getElementById("type");
var score = document.getElementById("score");

if (type === 0) {
  score.value = 0;
} else if (type === 'basketball') {
  score.value = 1;
} else if (type === 'soccer') {
  score.value = 2;
} else if (type === 'table tenis') {
  score.value = 3;
}

Answer 1

我在这里使用过Jquery，你犯的错误是，没有关注这个事件。

＆＃13;

$('#type').on('input',function(e){
     var type = document.getElementById("type").value;
var score = document.getElementById("score"); 
if (type === 0) { score.value = 0; } 
else if (type === 'basketball') { score.value = 1; } 
else if (type === 'soccer') { score.value = 2; } 
else if (type === 'table tenis') { score.value = 3; }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <div>
      <input list="typeList" name="type" id="type">
      <datalist id="typeList">
        <option value="basketball">
        <option value="soccer">
        <option value="table tenis">
      </datalist>
    </div>
  </td>

  <td><input type="text" id="score" name="score" autocomplete="off"></td>
</tr>

＆＃13;

希望这有帮助

Answer 2

var type = document.getElementById("type");
//...

这里应该是var type = document.getElementById("type").value;

以及

if (type === 0) {

到

if (type === "0") {

Answer 3

您可以访问该元素。您只需要使用元素的value属性。您需要使用下拉列表添加事件change，以便在更改索引时它可以绑定score文本框中的数据。

var type = document.getElementById("type");
var score = document.getElementById("score");

type.addEventListener('change', function() { 
     if (type.value === 0) {
      score.value = 0;
    } else if (type.value === 'basketball') {
      score.value = 1;
    } else if (type.value === 'soccer') {
      score.value = 2;
    } else if (type.value === 'table tennis') {
      score.value = 3;
    }
});

<tr>
  <td>
    <div>
      <input list="typeList" name="type" id="type">
      <datalist id="typeList">
        <option value="basketball">
        <option value="soccer">
        <option value="table tennis">
      </datalist>
    </div>
  </td>

  <td><input type="text" id="score" name="score" autocomplete="off" ></td>
</tr>

Answer 4

您需要添加一个事件监听器（或两个，一个用于更改，一个用于输入），然后将代码包装在一个函数中：

＆＃13;

<tr>
  <td>
    <div>
      <input list="typeList" name="type" id="type">
      <datalist id="typeList">
        <option value="basketball">
        <option value="soccer">
        <option value="table tenis">
      </datalist>
    </div>
  </td>

  <td><input type="text" id="score" name="score" autocomplete="off"></td>
</tr>

＆＃13;

System.currentTimeMillis()

＆＃13;

Answer 5

在你的if中应该是

{{1}}

获取输入框的值。你什么时候运行脚本？

Answer 6

// you forgot to attach the value property of the type element
var typeValue = document.getElementById("type").value; 
// the result for typeValue is allways a string or undefined

var scoreElement = document.getElementById("score");

// a swtich case is more efficient here
swtich(typeValue){
  case 'basketball':
    scoreElement.value = 1;
    break;
  case 'soccer':
    scoreElement.value = 2:
    break;
  case 'table tenis'
    scoreElement.value = 3;
    break;
  default:
    sourceElement.value = 0;
}

Answer 7

这里使用纯JavaScript和jsfiddle https://jsfiddle.net/4oyrw61w/

document.getElementById('type').addEventListener('input', function () {
    var type = document.getElementById("type").value;
    var score = document.getElementById("score");

    if (type === '0') {
        score.value = 0;
    } else if (type === 'basketball') {
      score.value = 1;
    } else if (type === 'soccer') {
      score.value = 2;
    } else if (type === 'table tenis') {
      score.value = 3;
    }
 });

if else语句用字符串JavaScript

7 个答案: