Question

我不是很熟悉JavaScript但是，我想将特定于性别的图片网址显示为输入类型的hidden字段中的值。我希望最终用户选择他们的性别，并根据返回到输入值字段的相应图像位置的URL。以下是我到目前为止的情况：

function myFunction(e) {
  var gender;
  if (gender == 'male') {
    document.getElementById("printGender").html(value = "http://example.com/male.svg");
  } else if (gender == 'female') {
    document.getElementById("printGender").html(value = "http://example.com/female.svg");
  }
};

和HTML代码：

<label for="name">Gender</label>
<select onchange="myFunction(event)" name="gendr" class="nofocus" id=gender required>
  <option value="other">Other</option>
  <option value="female">Female</option>
  <option value="male">Male</option>
</select>
<input type="hidden" id="printGender" style="color:#000">

Answer 1

你没有获得性别的价值。改变这一行：

var gender;

为：

var gender = document.getElementById("gender").value;

Answer 2

我知道，您从未在gender中定义myFunction变量，因此始终为undefined而且，添加img的语法完全错误！

试试这个：

function myFunction(e) {
  var gender = this.value; // Getting the current selected value
  if (gender == 'male') {
    document.getElementById("printGender").value = "<img src='http://example.com/male.svg'/>";
  } else if (gender == 'female') {
    document.getElementById("printGender").value = "<img src='http://example.com/female.svg'/>";
  }
};

Answer 3

在myfunction（）中，性别的值未定义。这就是if-else块永远不会运行的原因，首先捕获值，如下面的代码

function myFunction(e) {
	var gender = document.getElementById('gender').value;
	if (gender == 'male'){
		document.getElementById("printGender").src="http://example.com/male.svg";
		
	} else if (gender == 'female') {
		document.getElementById("printGender").src="http://example.com/female.svg";
	}
};

<label for="name">Gender</label>
<select onchange="myFunction(event)" name="gendr" class="nofocus" id=gender required>
	<option value="other">Other</option>
	<option value="female">Female</option>
	<option value="male">Male</option>
</select>
<img id="printGender">

Answer 4

<html>
<head>
<title>Sample</title>
<script type="text/javascript" language="javascript">

function myFunction(listElem) 
{
  var gender = null;
  var printGenderElem = null;

  try
  {
    printGenderElem =  document.getElementById("printGender");
    gender = listElem.options[listElem.selectedIndex].value;

    if(gender=="male") printGenderElem.value="http://example.com/male.svg";
    else if(gender=="female") printGenderElem.value="http://example.com/female.svg";
    else printGenderElem.value=""

    // Debugging purposes only, remove after verified
    alert(printGenderElem.value);
  }
  catch(e)
  {
    alert("myFunction Error:  " + e.Message);
  }
  finally
  {

  }
}

</script>
</head>
<body>

<label for="name">Gender</label>
<select onchange="myFunction(this)" name="gendr" class="nofocus" id=gender required>
  <option value="other">Other</option>
  <option value="female">Female</option>
  <option value="male">Male</option>
</select>
<input type="hidden" id="printGender" style="color:#000">

</body>
</html>

JavaScript - 如何根据选择选项中的性别选择更改输入文本值

4 个答案: