I have simple HTML code with some javascript, it looks like:
<html>_x000D_
_x000D_
<head>_x000D_
<script type="text/javascript">_x000D_
function changeDivContent() { // ..._x000D_
};_x000D_
</script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">_x000D_
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent()">_x000D_
_x000D_
<div id="content"></div>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>I just wanted to be able to change the div's content (it's inner html) with selecting one of "A" or "B" radio buttons, but div#content does not have javascript attribute "value", so I am asking how it can be done.
This question is related to
javascript
html
The answer is
Get the id of the div whose content you want to change then assign the text as below:
var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
$('#content').html('whatever');
change onClick to onClick="changeDivContent(this)" and try
function changeDivContent(btn) {
content.innerHTML = btn.value
}
function changeDivContent(btn) {_x000D_
content.innerHTML = btn.value_x000D_
}<input type="radio" name="radiobutton" value="A" onClick="changeDivContent(this)">_x000D_
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent(this)">_x000D_
_x000D_
<div id="content"></div><!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- code------------
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.
Live Code
you can use following helper function:
function content(divSelector, value) {
document.querySelector(divSelector).innerHTML = value;
}
content('#content',"whatever");
Where #content must be valid CSS selector
Here is working example.
Additionaly - today (2018.07.01) I made speed comparison for jquery and pure js solutions ( MacOs High Sierra 10.13.3 on Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-bit) ):
document.getElementById("content").innerHTML = "whatever"; // pure JS
$('#content').html('whatever'); // jQuery
The jquery solution was slower than pure js solution: 69% on firefox, 61% on safari, 56% on chrome. The fastest browser for pure js was firefox with 560M operations per second, the second was safari 426M, and slowest was chrome 122M.
So the winners are pure js and firefox (3x faster than chrome!)
You can test it in your machine: https://jsperf.com/js-jquery-html-content-change
Source: Stackoverflow.com