New course! Every coder should learn Generative AI!
Try a free lesson+ 2
Drop down html
How can I take user selected data (from a html drop down list) and immediately change the data displayed elsewhere on the browser screen. Ex. user selects “green” from a drop down box and that instantly changes the selected color below in the “color you selected:” field.
7 Answers
0
I ended up tweaking things until this finally worked perfectly for *multiple results output "individually" on one part of screen and "all together" on a different part of the screen...
//I created a global array for holding user-input from JS function1 "together" for output later.
var results = [];
//First, JS function1 gets user-input from different drop-down lists in html (only one function is shown here), updates/outputs "individual" id attributes in html, & adds user-input to a global array. I added space to visually separate the values from the array's output correctly (you know, default commas and all.)...
function changeArea() {
var area = document.getElementById("selectArea").value;
document.getElementById("updatedArea").innerHTML = area;
results.push(' ' + area);
console.log(results);
}
//Then, user clicks a button to activate HTML call to JS function2 that outputs global array values "together". This is after all the HTML drop-down lists in the HTML code.
<div id="result_btn">
<button onclick="listUpdater()">See Results</button>
</div>
//Finally, JS function2 to outputs the global array's values "together" on a "different" part of the screen
function listUpdater() {
var choices = document.getElementById('updatedList');
choices.textContent = results.toString();
}
+ 5
<select id="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="pink">pink</option>
</select>
</form>
<button type="button" onclick="test()">Try it</button>
<p id="demo"></p>
<script>
function test() {
var x = document.getElementById("select").value;
document.getElementById("demo").innerHTML = x;
}
</script>
0
i think there must be a simpler way to do it. it is a very extended script...
0
https://code.sololearn.com/W4Rj89WoaIhW/#html
Try Modifying this code....
in this example i'm using a subfolder for each the .js file and .css, so in the head section i had to put the full path
Step 1: HTML
!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<section id="main">
<div class="container">
<div id="otherfx">
<h2>Move the mouse over a square</h2><br>
<br>
<br>
<table style="width:100%;height:100px">
<tr style="align-content: center">
<td onmouseover="bgChange(this.style.backgroundColor)"
onmouseout="bgChange('transparent')"
style="background-color:#0000ff">
</td>
<td onmouseover="bgChange(this.style.backgroundColor)"
onmouseout="bgChange('transparent')"
style="background-color:#00ff00">
</td>
<td onmouseover="bgChange(this.style.backgroundColor)"
onmouseout="bgChange('transparent')"
style="background-color:#ff0000">
</td>
</tr>
</table>
<br><br>
</div>
>
</div>
</section>
</body>
</html>
0
Step 2: CSS
*{
margin: 0;
padding: 0;
}
body{
background: transparent;
}
/*globals*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
#otherfx{
width: 100%;
margin-top: 30px auto;
margin-bottom: 15px;
text-align: center;
}
0
Step 3: JS
function bgChange(bg) {
"use strict";
document.body.style.background = bg;
}
Often have questions like this?
Learn more efficiently, for free:
Hot today
Problem
0 Votes
USING HTML ONLY!!!
4 Votes
Why is the result always 0?
1 Votes
Game Devolopment with JS
0 Votes