我想要的是让第一个事件监听器在更改选项时使用它，然后在填写表单后将其弹出页面底部。我只能使用Vanilla Javascript。此外，如果您选择除第5个选项以外的任何其他选项，它将变为灰色，无法选择任何单选按钮。然后你填写表格，我不能提交表格，我必须让它下载innerHTML。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<meta charset="utf-8">
<title>Create</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form>
<!--selections inputs-->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="select">
<option value="4">1</option>
<option value="51">2</option>
<option value="765">3</option>
<option value="74747">4</option>
<option value="1">5</option>
</select>
</div>
<!--radio inputs-->
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="red" disabled>
<label class="form-check-label" for="exampleRadios1">
Red Fleet
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="white" disabled>
<label class="form-check-label" for="exampleRadios2">
White Fleet
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="color" id="blue" disabled>
<label class="form-check-label" for="exampleRadios3">
Blue Fleet
</label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">change this</label>
<input type="text" class="form-control" id="date" aria-
describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">change this</label>
<input type="text" class="form-control" id="location">
</div>
<div class="form-group">
<label for="exampleInputPassword1">change this</label>
<input type="text" class="form-control" id="textbox">
</div>
<button type="submit" class="btn btn-primary" id="btn">Submit</button>
</form>
</div>
<div class="col-lg-6"></div>
<p id="dateout"></p>
<p id="locationout"></p>
<p id="textboxout"></p>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", init, false);
function init(e) {
e.preventDefault;
document.getElementById("select").addEventListener("change", start);
}//end init function
//main algorithm
function start(e) {
e.preventDefault;
short();
//child one
function short(e) {
e.preventDefault;
var blue;
var white;
var red;
var select;
select = document.getElementById("select").value;
if (select == 1) {
document.getElementById("red").disabled = false;
document.getElementById("white").disabled = false;
document.getElementById("blue").disabled = false;
document.getElementById("btn").addEventListener("click", uhjeff);
}
else {
document.getElementById("red").disabled = true;
document.getElementById("white").disabled = true;
document.getElementById("blue").disabled = true;
document.getElementById("btn").addEventListener("click", uhjeff);
}
}
}
function uhjeff(e) {
var date;
var location;
var textbox;
e.preventDefault;
document.getElementById("dateout").innerHTML = document.getElementById("date").value;
document.getElementById("locationout").innerHTML = document.getElementById("location").value;
document.getElementById("textboxout").innerHTML = document.getElementById("textbox").value;
}
</script>
</body>
</html>
答案 0 :(得分：1)
你有几个错误。请阅读下面的内联HTML和JavaScript注释以进行更正。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<meta charset="utf-8">
<title>Create</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form>
<!--selections inputs-->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="select">
<option value="4">1</option>
<option value="51">2</option>
<option value="765">3</option>
<option value="74747">4</option>
<option value="1">5</option>
</select>
</div>
<!--radio inputs-->
<!-- The "for" attribute of a <label> must match the "id" attribute of the
element that it is a label for. -->
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="red" value="red" disabled>
<label class="form-check-label" for="red">Red Fleet</label>
</div>
<div class="form-check">
<!-- radio buttons need to have a value for them to have meaning -->
<input class="form-check-input" type="radio" name="color" id="white" value="white" disabled>
<label class="form-check-label" for="white">White Fleet</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="color" id="blue" value="blue" disabled>
<label class="form-check-label" for="blue">Blue Fleet</label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">change this</label>
<input type="text" class="form-control" id="date" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="location">change this</label>
<input type="text" class="form-control" id="location">
</div>
<div class="form-group">
<label for="textbox">change this</label>
<input type="text" class="form-control" id="textbox">
</div>
<button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>
</div>
<div class="col-lg-6"></div>
<p id="dateout"></p>
<p id="locationout"></p>
<p id="textboxout"></p>
</div>
</div>
<script>
// If you script is located after all the HTML, then it is unecessary to set up a
// DOMContentLoaded event listener because, at this point, the DOM is loaded.
document.getElementById("select").addEventListener("change", start);
// Get the references to the DOM elements you'll be using just once:
var blue = document.getElementById("blue");
var white = document.getElementById("white");
var red = document.getElementById("red");
// You need a reference to the form, not the submit button, because it's the
// submit event of the form that you'll need to cancel later.
var form = document.querySelector("form");
var dateout = document.getElementById("dateout");
var date = document.getElementById("date");
var locationout = document.getElementById("locationout");
// location is a Global property of window, don't use it as a variable name
var loc = document.getElementById("location");
var textboxout = document.getElementById("textboxout");
var textbox = document.getElementById("textbox");
// You were setting the button's event handler in all cases, so it doesn't
// belong in an "if". Also, the button is a submit button, so handle the submit event
// of the form, not the click event of the button
form.addEventListener("submit", uhjeff);
//main algorithm
function start(e) {
// There is no reason to cancel the "change" event of the select.
// Also, since all this function does is call short(), just make this
// function have the contents of short()
// Since this is the change event handler for your select, you can access
// the select with the keyword "this"
if (this.value == 1) {
// You initially set the elements to be disabled with the disabled HTML attribute.
// To avoid confusion, modify the attribute, not the JavaScript property.
red.removeAttribute("disabled");
white.removeAttribute("disabled");
blue.removeAttribute("disabled");
} else {
red.setAttribute("disabled", "disabled");
white.setAttribute("disabled", "disabled");
blue.setAttribute("disabled", "disabled");
}
}
function uhjeff(e) {
e.preventDefault(); // .preventDefault() is a method, you need to add () after it.
// .innerHTML is for setting/getting strings that contain HTML
// Use .textContent when working with strings that don't have HTML
dateout.textContent = date.value;
locationout.textContent = loc.value;
textboxout.textContent = textbox.value;
}
</script>
</body>
</html>