我有简单的HTML代码和一些JavaScript。它看起来是这样的:
< html > < >头 <脚本type = " text / javascript”> function changeDivContent(){//… }; > < /脚本 > < /头 身体< > <input type="radio" name="radiobutton" value="A" onClick="changeDivContent()" > <input type="radio" name="radiobutton" value="B" onClick="changeDivContent()" > < div id = "内容" > < / div > < /身体> < / html >
我只是想能够改变div的内容(它的内部html)与选择“A”或“B”单选按钮之一，但div#内容没有javascript属性“值”，所以我问它可以怎么做。
当前回答
获取你想要更改内容的div的id，然后按如下方式分配文本:
var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
其他回答
假设您没有使用jQuery或其他可以使这类事情变得更容易的库，您可以只使用元素的innerHTML属性。
document.getElementById("content").innerHTML = "whatever";
使用jQuery:
$('#content').html('whatever');
将onClick更改为onClick="changeDivContent(this)"并尝试
function changeDivContent(btn) {
content.innerHTML = btn.value
}
函数更改DivContent（btn） { content.innerHTML = btn.value } <输入类型=“单选”名称=“单选按钮”值=“A” onClick=“changeDivContent（this）”> <输入类型=“单选” 名称=“单选按钮” 值=“B” onClick=“changeDivContent（this）”> <div id=“content”></div>
获取你想要更改内容的div的id，然后按如下方式分配文本:
var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="radio" name="radiobutton" value="A" onclick = "populateData(event)">
<input type="radio" name="radiobutton" value="B" onclick = "populateData(event)">
<div id="content"></div>
</body>
</html>
-----------------JS- 代码------------
var targetDiv = document.getElementById('content');
var htmlContent = '';
function populateData(event){
switch(event.target.value){
case 'A':{
htmlContent = 'Content for A';
break;
}
case 'B':{
htmlContent = "content for B";
break;
}
}
targetDiv.innerHTML = htmlContent;
}
Step1: on click of the radio button it calls function populate data, with event (an object that has event details such as name of the element, value etc..);
Step2: I extracted the value through event.target.value and then simple switch will give me freedom to add custom text.
生活的代码
https://jsbin.com/poreway/edit?html,js,output
