| Get Value | Javascript code | Html code | Result |
|---|---|---|---|
| Textbox | document.getElementById(“txtName”).value |
<input type="text" id="txtName" /> <button type="button" onclick="getvalues()">Getvalue</button> |
|
| span/div | document.getElementById(“txtbx”).innerHTML |
<span id="txtbx">CRMHIKE<span> <button type="button" onclick="getvalues()">Getvalue</button> |
CRMHIKE |
| radio button |
var a =document.getElementsByName(‘gender’); for (var i = 0; i < a.length; i++){ if (a[i].checked){ alert(a[i].value); break; } } |
<input type="radio" name="gender" value="Male"/>Male <input type="radio" name="gender" value="Female"/>Female <button type="button" onclick="getvalue">GetValue</button> |
Male Female |
| checkbox button |
var checkboxes = document.getElementsByName(‘subject’); var result = “”; for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked){ result += checkboxes[i].value + “, “; }} if (result == “”){alert(“Value not selected”)} else{alert(result);}} |
<input type="checkbox"name="subject"value="Math"/>Math <input type="checkbox"name="subject"value="Hindi"/>Hindi <input type="checkbox"name="subject"value="English"/>English <button type="button" onclick="getValue()">Get Value</button> |
Math Hindi English |
| Set Value | |||
| Textbox | document.getElementById('txtname').value='Vikas' |
<input type="text" id="txtname" /> <button type="button" onclick="setvalues()">Set Value</button> |
Vikas |
| span/div | document.getElementById('txtvalue').innerHTML='CRMHIKE' |
<span id="txtvalue">CRMHIKE<span> |
CRMHIKE |
| radio button |
document.getElementById('txtm').checked = true; document.getElementById('txtradio').innerHTML = 'Male'; |
<input type="radio" id="txtm" name="gender" value="Male"/>Male <input type="radio" id="txtf" name="gender" value="Female"/>Female <span id="txtradio"></span> |
Male Female |
| checkbox button |
var checkboxes = document.getElementsByName('sub'); var checkboxValues = ['Science', 'Computer']; for (var i = 0; i < checkboxes.length; i++) { for (var j = 0; j < checkboxValues.length; j++) { if (checkboxes[i].value === checkboxValues[j]) { checkboxes[i].checked = true; document.getElementById('chkbox').innerHTML += checkboxValues[j] + ' ';}}}} |
<input type="checkbox" name="sub" value="Science" /> Science <input type="checkbox" name="sub" value="Computer" /> Computer <input type="checkbox" name="sub" value="English" /> English <button type="button" onclick="setValue()">SetValue</button> <span id="chkbox"></span> |
Science Computer English |
| HTML | JAVASCRIPT | OUTPUT |
|---|---|---|
| "Write JavaScript functions to perform addition, two input numbers provided by the user. Display the results with appropriate headings in an HTML element with the id 'Result'." | ||
<div style="border:1px solid black">
<dl>
<dt>Enter the first number:</dt>
<dd><input type="text" id="num1"/></dd>
<dt>Enter the second number:</dt>
<dd><input type="text" id="num2"/></dd>
<dd>
<input type="button" onclick="add()" value="ADD"/>
</dd>
<dd id="Result"></dd>
</dl>
</div>
|
<script>
function add() {
var a = Number(document.getElementById("num1").value);
var b = Number(document.getElementById("num2").value);
var res = a + b ;
document.getElementById("Result").innerHTML +=
"<h1>" + "Addition Result is " + res + "</h1>"
}
</script>
|
Welcome to CRMHIKE:
|
| "Write a JavaScript function to retrieve the value entered in the text input field when the button is clicked. Display the value in a paragraph element with the id 'txt1'." | ||
<div style="border:1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<input type="text" id="txt" />
<button type="button" onclick="getvalues()">Getvalue</button>
<h2>Result:</h2>
<p id="txt1"></p>
</div>
|
<script>
function getvalues() {
var a = document.getElementById("txt").value;
document.getElementById("txt1").innerHTML = a;
}
</script>
|
Welcome to CRMHIKE: Result:
|
| "Create a JavaScript function to retrieve the selected value from radio buttons when the button is clicked. Display the selected value in a paragraph element with the id 'output'." | ||
<div style="border:1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<input type="radio" name="gender" value="Male" />Male:
<input type="radio" name="gender" value="Female" />Female:
<button type="button" onclick="getvalue()">Click!</button>
<h1>Result</h1>
<p id="output"></p>
</div>
|
<script>
function getvalue() {
var a = document.getElementsByName("gender");
var i;
for (i = 0; i < a.length; i++) {
if (a[i].checked) {
document.getElementById("output").innerHTML = a[i].value;
}
}
}
</script>
|
Welcome to CRMHIKE: Male: Result:
|
| "Write a JavaScript function that retrieves the value entered in the first text input field and sets it as the value of the second text input field when the button is clicked." | ||
<div style="border:1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<input type="text" id="get" />
<button type="button" onclick="getsetvalue()">GetSetvalue</button>
<input type="text" id="set" />
</div>
|
<script>
function getsetvalue() {
var a = document.getElementById("get").value;
document.getElementById("set").value = a;
}
</script>
|
Welcome to CRMHIKE:
|
| "Create a JavaScript function that toggles the visibility of the div element with the id 'divhd' when the button is clicked." | ||
<div style="border:1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<div id="divhd">This is CRMHIKE Tutorial.</div>
<button type="button" onclick="hideandshow()">Click!</button>
</div>
|
<script>
function hideandshow() {
var a = document.getElementById("divhd");
if (a.style.display === "none") {
a.style.display = "block";
}
else {
a.style.display = "none";
}
}
</script>
|
Welcome to CRMHIKE:This is CRMHIKE Tutorial.
|
| "Implement a JavaScript function to hide or show the element with the id 'HideElement' based on the state of the checkbox with the id 'hideCheckbox' when it's clicked." | ||
<div style="border: 1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<label><input type="checkbox" id="hideCheckbox"
onclick="HideandShowElement()"/>Hide Element:</label>
<div id="HideElement" style="border: 1px solid black; padding: 10px;">
This is the element you want to hide/show.
</div>
|
<script>
function HideandShowElement() {
var checkbox = document.getElementById("hideCheckbox");
var element = document.getElementById("HideElement");
if (checkbox.checked) {
element.style.display = "none";
}
else {
element.style.display = "block";
}
}
</script>
|
Welcome to CRMHIKE:
This is the element you want to hide/show.
|
| "Create a JavaScript function to update the content of the paragraph element with the id 'Onchoose' to reflect the selected value from the dropdown menu with the id 'choose' when the 'Choose' button is clicked." | ||
<div style="border:1px solid black">
<h2>Welcome To CRMHIKE</h2>
<select id="choose">
<option value="Html">HTML</option>
<option value="CSS">CSS</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
<option value="PHP">PHP</option>
<option value="BOOTSTRAP">BOOTSTRAP</option>
</select>
<button type="button" onclick="text1()">Choose</button>
<p id="Onchoose"></p>
</div>
|
<script>
function text1() {
var a = document.getElementById("choose").value;
document.getElementById("Onchoose").innerHTML = a;
}
</script>
|
Welcome To CRMHIKE
|
Last Update: July 17, 2026
Total 0 Votes:
0
0