Reputation: 35
//I want to print selected information from selection of select box. But I don't know why the function 'print_info' doesn't work in my code. I think there's a problem in print_info's div tag because I can't see color icon next to the 'background-color'. Please let me know where should I fix.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body style="text-align: center; background-color:#9191e988">
<div style="position: absolute; left: 60px; border:white; background-color:white; padding:10px;">
<p><font size="2">Select route</font></p>
<form>
<select name="number" id="NUM" onchange="changenumSelect(this.value)">
<option value=""disabled>select num</option>
<option value="n1"selected>n1</option>
<option value="n2">n2</option>
<option value="n3">n3</option>
</select>
</form>
</div>
<script> function chageRouteSelect(r){
if (r=="n1")
print_info(11, 22, "a", "b", 33);
else if(r=="n2")
print_info(44, 55, "c", "d", 66);
else if(r=="n3")
print_info(77, 88, "e", "f", 99);
</script>
<script> function print_info(num1, num2, stp1, stp2, dist){
<div style="position: absolute; left: 60px; top: 70px; border: 5px; background-color:white; padding:20px;">
<font size="5">main number</font>
document.write("about ".bold()+num1+"<br/>".bold());
document.write("sub number "+num2+"<br/>");
document.write("begin: "+stp1+"<br/>↕<br/> end: "+stp2+"<br/>");
document.write("distance: "+dist+"km");
</div>
}
</script>
</body>
</html>
Upvotes: 1
Views: 262
Reputation: 81
I've written a slightly more neat solution. In terms of styling and JavaScript. It's also a one-page solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Route Info</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #9191e988
}
.select-box {
border-radius: 5px;
text-align: center;
background-color: white;
padding: 10px;
width: 100px;
margin: 20px auto 20px 20px;
}
.info {
border-radius: 5px;
background-color: white;
margin-top: 10px;
padding: 20px;
width: 250px;
margin: 20px auto 20px 20px;
}
</style>
</head>
<body>
<div class="select-box">
<h4>Select route</h4>
<form>
<select name="number" id="NUM" onchange="changenumSelect(this.value)">
<option value="">select num</option>
<option value="n1">n1</option>
<option value="n2">n2</option>
<option value="n3">n3</option>
</select>
</form>
</div>
<div id="info" class="info" style="display: none;">
<b>main number <span id="main-number"></span></b> <br>
sub number: <span id="sub-number"></span><br>
begin: <span id="begin"></span><br>
end: <span id="end"></span><br>
distance (km): <span id="dist"></span>
</div>
<script>
function changenumSelect(r) {
if (r == "n1")
print_info(11, 22, "a", "b", 33);
else if (r == "n2")
print_info(44, 55, "c", "d", 66);
else if (r == "n3")
print_info(77, 88, "e", "f", 99);
}
function print_info(num1, num2, stp1, stp2, dist) {
const info = document.getElementById("info");
if (info.style.display === "none") {
info.style.display = "block";
}
const main = document.getElementById("main-number");
const sub = document.getElementById("sub-number");
const begin = document.getElementById("begin");
const end = document.getElementById("end");
const distance = document.getElementById("dist");
main.textContent = num1;
sub.textContent = num2;
begin.textContent = stp1;
end.textContent = stp2;
distance.textContent = dist;
}
</script>
</body>
</html>
Upvotes: 2
Reputation: 21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body style="text-align: center; background-color:#9191e988">
<div style="position: absolute; left: 60px; border:white; background-color:white; padding:10px;">
<!-- 1- <p><font size="2">Select route</font></p> // <font> tag Element not supported by html5 better not to use -->
<p style='font-size: 2;'>Select route</p>
<form>
<select name="number" id="NUM" onchange="changenumSelect(this.value)">
<option value=""disabled>select num</option>
<option value="n1"selected>n1</option>
<option value="n2">n2</option>
<option value="n3">n3</option>
</select>
</form>
</div>
<script>
// changenumSelect not chageRouteSelect
function changenumSelect(r){
if (r=="n1")
print_info(11, 22, "a", "b", 33);
else if(r=="n2")
print_info(44, 55, "c", "d", 66);
else if(r=="n3")
print_info(77, 88, "e", "f", 99);
// "}" missing !
}
</script>
<script> function print_info(num1, num2, stp1, stp2, dist){
// Fix Notes
// ↕ symbol was used beside + "document.write("begin: "+stp1+"<br/>"↕"<br/> end: "+stp2+"<br/>");"
// All Html tags and strings must be rapped in qoutes and be seperated from Variables and Javascript
'<div style="position: absolute; left: 60px; top: 70px; border: 5px; background-color:white; padding:20px;">'
+
'<font size="5">' // better not to use
+
'main number'
+
'</font>' // better not to use
+
document.write("about ".bold()+num1+"<br/>".bold());
document.write("sub number "+num2+"<br/>");
document.write("begin: "+stp1+"<br/>"+"<br/> end: "+stp2+"<br/>");
document.write("distance: "+dist+"km");
+
'</div>'
}
</script>
</body>
</html>
Upvotes: 2