似乎无法让我的模态在 X 上关闭。第一个模态关闭，但其他模态没有。下面是代码片段。不是全部。如果需要，我可以发布全文。
我有 window.onclick 函数工作，所以如果我在任何模式之外单击它会关闭，但 X 似乎只在我显示的第一个模式上工作。有什么想法吗？
<body>
<div class="page">
<!-- Trigger/Open The Modal -->
<button id="startButton" class="button"></button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<select id="selectMaterial"></select>
<div id="thickness">
<!-- <input id="enterThickness"> -->
<input id='enterThickness' class="input" type="number" min="0" max="50" step="1"
placeholder='Enter Material Thickness in Millimeters' /><span class="input-group-text"> /MM
</span>
</div>
<div id="rpm">
<!-- <input id="enterThickness"> -->
<input id='enterRPM' class="input" type="number" min="5000" max="60000" step="5000"
placeholder='Enter Max Spindle RPM' /><span class="input-group-text"> /RPM </span>
</div>
<div id="bitList">
<button id="bitsButton" class="button">SHOW AVAILABLE MILLING BITS</button>
</div>
<!-- <button id="calcButton" class="calcButton">CALCULATE CUTTING PARAMETERS</button> -->
</div>
</div>
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div id="displayInput"></div>
<select id="displayBits"></select>
<div id="selectBit">
<button id="selectBitsButton" class="button">SELECT BIT AND CALCULATE</button>
</div>
</div>
</div>
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div id="noBits">
<button id="startOverButton" class="button">START OVER</button>
</div>
</div>
</div>
</div>
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function (event) {
if (event.target == modal || modal2 || modal3) {
modal.style.display = "none";
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
if (event.target == modal3) {
modal3.style.display = "none";
}
答案 0 :(得分：0)
问题不在于类的名称，而是 getElementsByClassName 返回了一个 span 列表，而 [0] 只选择了第一项。您需要遍历列表并将 onclick 应用于每个列表。类似的东西：
// Get all <span> elements that close the modal
var closeSpans = document.getElementsByClassName("close");
// convert list to an array and loop over each item
Array.from(closeSpans).forEach(function(span, idx, arr) {
// now you can apply click to <span> like usual
// When the user clicks on <span> (x), close the modal
span.onclick = function (event) {
if (event.target == modal || modal2 || modal3) {
modal.style.display = "none";
}
}
});
有意义吗？否则，您必须像这样通过索引分别选择每个（您熟悉索引吗？）：
var span1 = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
var span3 = document.getElementsByClassName("close")[2];
答案 1 :(得分：0)
window.onClick 事件应该就够了，你可以使用元素的 id 来识别它们并设置它们的样式
// When the user clicks on the close spam, close the parent modal
window.onclick = function (event) {
if (event.target.id == 'close1') {
document.getElementById('myModal1').style.display = "none";
}
if (event.target.id == 'close2') {
document.getElementById('myModal2').style.display = "none";
}
if (event.target.id == 'close3') {
document.getElementById('myModal3').style.display = "none";
}
}<body>
<div class="page">
<!-- Trigger/Open The Modal -->
<button id="startButton" class="button"></button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close1">×</span>
<select id="selectMaterial"></select>
<div id="thickness">
<!-- <input id="enterThickness"> -->
<input id='enterThickness' class="input" type="number" min="0" max="50" step="1"
placeholder='Enter Material Thickness in Millimeters' /><span class="input-group-text"> /MM
</span>
</div>
<div id="rpm">
<!-- <input id="enterThickness"> -->
<input id='enterRPM' class="input" type="number" min="5000" max="60000" step="5000"
placeholder='Enter Max Spindle RPM' /><span class="input-group-text"> /RPM </span>
</div>
<div id="bitList">
<button id="bitsButton" class="button">SHOW AVAILABLE MILLING BITS</button>
</div>
<!-- <button id="calcButton" class="calcButton">CALCULATE CUTTING PARAMETERS</button> -->
</div>
</div>
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close2">×</span>
<div id="displayInput"></div>
<select id="displayBits"></select>
<div id="selectBit">
<button id="selectBitsButton" class="button">SELECT BIT AND CALCULATE</button>
</div>
</div>
</div>
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close3">×</span>
<div id="noBits">
<button id="startOverButton" class="button">START OVER</button>
</div>
</div>
</div>
</div>答案 2 :(得分：0)
将我的完整代码转储进去。看起来它在这里也不起作用。所以我有点不对劲。如果我只插入 html 的部分和我正在处理的脚本似乎可以工作，那么我的其他东西会导致它失败而没有错误。
// Get the modal
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal2");
var modal3 = document.getElementById("myModal3");
// Get the button that opens the modal
var startButton = document.getElementById("startButton");
// // Get the <span> element that closes the modal
// When the user clicks on the button, open the modal
startButton.onclick = function() {
enterThickness.value = null;
enterRPM.value = null;
selectMaterial.value = "Select Material";
thickness.style.visibility = "hidden";
rpm.style.visibility = "hidden";
bitList.style.visibility = "hidden";
modal.style.display = "block";
displayBits.value = null;
displayBits.value = "Select Bit";
//startOverButton.style.visibility = "hidden",
}
var created = false;
var materialValue;
var thicknessValue;
var enteredThickness = document.getElementById(enterThickness);
var rpmValue;
var enteredRPM = document.getElementById(enterRPM);
var select = document.getElementById('selectMaterial');
var select2 = document.getElementById('displayBits');
var materials = [{
name: "Select Material"
},
{
name: "Acrylic",
metal: false,
plastic: true,
multipurpose: true,
soft: false,
hard: true
},
{
name: "Aluminum",
metal: true,
plastic: false,
multipurpose: false,
soft: false,
hard: true
},
{
name: "Armed Graphite Gasket",
plastic: true,
multipurpose: true,
soft: false,
hard: true
},
{
name: "Hard Brass",
metal: true,
plastic: false,
multipurpose: false,
soft: false,
hard: true
},
{
name: "Hard Foam",
metal: false,
plastic: true,
multipurpose: true,
soft: false,
hard: true
},
{
name: "PVC - Soft",
metal: false,
plastic: true,
multipurpose: true,
soft: true,
hard: false
},
{
name: "PVC - Rigid",
metal: false,
plastic: true,
multipurpose: true,
soft: false,
hard: true
},
{
name: "Polycarbonate - Soft",
metal: false,
plastic: true,
multipurpose: true,
soft: true,
hard: false
},
{
name: "Polycarbonate - Rigid",
metal: false,
plastic: true,
multipurpose: true,
soft: false,
hard: true
},
{
name: "Polypropylene",
metal: false,
plastic: true,
multipurpose: true,
soft: true,
hard: false
},
{
name: "Wood - Soft",
metal: false,
plastic: true,
multipurpose: true,
soft: true,
hard: false
},
{
name: "Wood - Hard",
metal: false,
plastic: true,
multipurpose: true,
soft: false,
hard: true
}
];
var bits = [
{
name: 'M1-308U',
material: 'metal',
ced: 3,
cel: 8,
flutes: 1,
angle: 'up',
rpm: 60000,
soft: .003,
hard: .005
},
{
name: 'M1-308UC',
material: 'metal',
ced: 3,
cel: 8,
flutes: 1,
angle: 'up',
rpm: 60000,
soft: .003,
hard: .005
},
{
name: 'M1-408U',
material: 'metal',
ced: 4,
cel: 8,
flutes: 1,
angle: 'up',
rpm: 60000,
soft: .004,
hard: .006
},
{
name: 'M1-506D',
material: 'metal',
ced: 5,
cel: 6,
flutes: 1,
angle: 'down',
rpm: 50000,
soft: .005,
hard: .007
},
{
name: 'M1-506U',
material: 'metal',
ced: 5,
cel: 6,
flutes: 1,
angle: 'up',
rpm: 55000,
soft: .005,
hard: .007
},
{
name: 'M1-506UC',
material: 'metal',
ced: 5,
cel: 6,
flutes: 1,
angle: 'up',
rpm: 50000,
soft: .006,
hard: .008
},
{
name: 'M1-608U',
material: 'metal',
ced: 6,
cel: 8,
flutes: 1,
angle: 'up',
rpm: 50000,
soft: .006,
hard: .008
},
{
name: 'M1-608UC',
material: 'metal',
ced: 6,
cel: 8,
flutes: 1,
angle: 'up',
rpm: 50000,
soft: .003,
hard: .006
},
{
name: 'M1-608UC',
material: 'metal',
ced: 6,
cel: 8,
flutes: 1,
angle: 'up',
rpm: 50000,
soft: .003,
hard: .006
},
{
name: 'M2-406U',
material: 'metal',
ced: 4,
cel: 6,
flutes: 2,
angle: 'up',
rpm: 50000,
soft: .003,
hard: .006
},
{
name: 'M2-606U',
material: 'metal',
ced: 6,
cel: 6,
flutes: 2,
angle: 'up',
rpm: 50000,
soft: .005,
hard: .007
},
{
name: 'MZ-303U',
material: 'metal',
ced: 3,
cel: 3,
flutes: 2,
angle: 'up',
rpm: 50000,
soft: .003,
hard: .005
},
{
name: 'P1-208D',
material: 'plastic',
ced: 2,
cel: 8,
flutes: 1,
angle: 'down',
rpm: 60000,
soft: .003,
hard: .005
},
{
name: 'P1-208U',
material: 'plastic',
ced: 2,
cel: 8,
flutes: 1,
angle: 'up',
rpm: 60000,
soft: .003,
hard: .005
},
{
name: 'P1-306U',
material: 'plastic',
ced: 3,
cel: 6,
flutes: 1,
angle: 'up',
rpm: 60000,
soft: .004,
hard: .006
},
{
name: 'P1-312D',
material: 'plastic',
ced: 2,
cel: 8,
flutes: 1,
angle: 'down',
rpm: 60000,
soft: .004,
hard: .005
},
{
name: 'P1-312U',
material: 'plastic',
ced: 3,
cel: 12,
flutes: 1,
angle: 'up',
rpm: 60000,
soft: .004,
hard: .006
},
{
name: 'P1-418D',
material: 'plastic',
ced: 4,
cel: 18,
flutes: 1,
angle: 'down',
rpm: 40000,
soft: .005,
hard: .006
},
{
name: 'P1-418U',
material: 'plastic',
ced: 4,
cel: 18,
flutes: 1,
angle: 'up',
rpm: 50000,
soft: .005,
hard: .007
},
{
name: 'P1-518D',
material: 'plastic',
ced: 5,
cel: 18,
flutes: 1,
angle: 'down',
rpm: 40000,
soft: .006,
hard: .008
},
{
name: 'P1-518U',
material: 'plastic',
ced: 5,
cel: 18,
flutes: 1,
angle: 'up',
rpm: 50000,
soft: .006,
hard: .009
},
{
name: 'P1-613U',
material: 'plastic',
ced: 6,
cel: 13,
flutes: 1,
angle: 'up',
rpm: 50000,
soft: .008,
hard: .012
},
{
name: 'P1-613D',
material: 'plastic',
ced: 6,
cel: 13,
flutes: 1,
angle: 'down',
rpm: 50000,
soft: .008,
hard: .012
},
{
name: 'P1-625U',
material: 'plastic',
ced: 6,
cel: 25,
flutes: 1,
angle: 'up',
rpm: 50000,
soft: .008,
hard: .012
},
{
name: 'P1-625D',
material: 'plastic',
ced: 6,
cel: 25,
flutes: 1,
angle: 'down',
rpm: 50000,
soft: .008,
hard: .012
},
{
name: 'P2-418D',
material: 'plastic',
ced: 4,
cel: 18,
flutes: 2,
angle: 'down',
rpm: 50000,
soft: .005,
hard: .007
},
{
name: 'P2-418U',
material: 'plastic',
ced: 4,
cel: 18,
flutes: 2,
angle: 'up',
rpm: 60000,
soft: .005,
hard: .007
},
{
name: 'P2-520D',
material: 'plastic',
ced: 5,
cel: 20,
flutes: 2,
angle: 'down',
rpm: 50000,
soft: .006,
hard: .008
},
{
name: 'P2-520U',
material: 'plastic',
ced: 5,
cel: 20,
flutes: 2,
angle: 'up',
rpm: 60000,
soft: .006,
hard: .009
},
{
name: 'P2-613U',
material: 'plastic',
ced: 6,
cel: 13,
flutes: 2,
angle: 'up',
rpm: 60000,
soft: .008,
hard: .012
},
{
name: 'P2-625D',
material: 'plastic',
ced: 6,
cel: 25,
flutes: 2,
angle: 'down',
rpm: 50000,
soft: .008,
hard: .012
},
{
name: 'P2-625U',
material: 'plastic',
ced: 6,
cel: 25,
flutes: 2,
angle: 'up',
rpm: 60000,
soft: .008,
hard: .012
},
{
name: 'X2-418S',
material: 'multipurpose',
ced: 4,
cel: 18,
flutes: 2,
angle: 'straight',
rpm: 60000,
soft: .006,
hard: .008
},
{
name: 'X2-420D',
material: 'multipurpose',
ced: 4,
cel: 20,
flutes: 2,
angle: 'down',
rpm: 60000,
soft: .006,
hard: .008
},
{
name: 'X2-420U',
material: 'multipurpose',
ced: 4,
cel: 20,
flutes: 2,
angle: 'up',
rpm: 60000,
soft: .006,
hard: .008
},
{
name: 'X2-520C',
material: 'multipurpose',
ced: 5,
cel: 20,
flutes: 2,
angle: 'compression',
rpm: 50000,
soft: .004,
hard: .006
},
{
name: 'X2-625C',
material: 'multipurpose',
ced: 6,
cel: 20,
flutes: 2,
angle: 'compression',
rpm: 50000,
soft: .006,
hard: .010
},
{
name: 'X2-418S',
material: 'multipurpose',
ced: 4,
cel: 18,
flutes: 2,
angle: 'straight',
rpm: 60000,
soft: .006,
hard: .008
},
{
name: 'X2-625D',
material: 'multipurpose',
ced: 6,
cel: 25,
flutes: 2,
angle: 'down',
rpm: 50000,
soft: .008,
hard: .010
},
{
name: 'X2-625D',
material: 'multipurpose',
ced: 6,
cel: 25,
flutes: 2,
angle: 'straight',
rpm: 50000,
soft: .006,
hard: .009
},
{
name: 'X2-625U',
material: 'multipurpose',
ced: 6,
cel: 25,
flutes: 2,
angle: 'up',
rpm: 50000,
soft: .008,
hard: .010
},
{
name: 'X2-650U',
material: 'multipurpose',
ced: 6,
cel: 50,
flutes: 2,
angle: 'straight',
rpm: 40000,
soft: .007,
hard: .009
},
];
window.onclick = function(event) {
document.getElementsByClassName("close");
window.onclick = function(event) {
if (event.target.id == "close1") {
document.getElementById('myModal').style.display = "none";
}
if (event.target.id == "close2") {
document.getElementById('myModal2').style.display = "none";
}
if (event.target.id == "close3") {
document.getElementById('myModal3').style.display = "none";
}
}
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
if (event.target == modal3) {
modal3.style.display = "none";
}
if (!event.target.matches('.materialButton')) {
if (!created) {
for (var i = 0; i < materials.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = materials[i].name;
opt.value = materials[i].name;
select.appendChild(opt);
}
created = true;
}
}
selectMaterial.addEventListener('change', function() {
thickness.style.visibility = "hidden";
rpm.style.visibility = "hidden";
bitList.style.visibility = "hidden";
if (this.value != "Select Material") {
thickness.style.visibility = "visible";
}
});
var thickness = document.getElementById("thickness");
enterThickness.addEventListener('change', function() {
thicknessValue = document.getElementById('enterThickness').value;
rpm.style.visibility = "hidden";
bitList.style.visibility = "hidden";
if (thicknessValue > 50) {
window.alert("Please enter a lower material thickness.");
}
if (materialValue != "Select Material") {
rpm.style.visibility = "visible";
}
});
var rpm = document.getElementById("rpm");
enterRPM.addEventListener('change', function enteredRPM() {
rpmValue = document.getElementById('enterRPM').value;
bitList.style.visibility = "hidden";
if (rpmValue > 60000 | rpmValue < 5000) {
window.alert("Please enter spindle RPM between 5,000 and 60,000.");
}
if (rpmValue != null) {
bitList.style.visibility = "visible";
}
});
bitsButton.onclick = (function() {
var userInputArray = new Array;
materialValue = document.getElementById("selectMaterial").value;
userInputArray = [materialValue, thicknessValue, rpmValue];
modal.style.display = "none";
modal2.style.display = "visible";
modal2.style.display = "block";
document.getElementById('displayInput').innerHTML = 'Compatible bits for' + " " + thicknessValue + " " + "mm" + " " + materialValue + " " +
"at" + " " + rpmValue + " " + "RPM as follows;";
var created2 = false;
if (!created2) {
const material = materials.find(item => item.name === materialValue);
const selectedBits = bits.filter(bit =>
(material.plastic && bit.material === 'plastic' && bit.cel >= thicknessValue) ||
(material.metal && bit.material === 'metal' && bit.cel >= thicknessValue) ||
(material.multipurpose && bit.material === 'multipurpose' && bit.cel >= thicknessValue)
);
if (selectedBits != undefined || selectedBits.length != 0) {
for (var i = 0; i < selectedBits.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = selectedBits[i].name;
opt.value = selectedBits[i].name;
select2.appendChild(opt);
}
if (selectedBits === undefined || selectedBits.length == 0) {
// array empty or does not exist
modal2.style.display = "none";
modal3.style.display = "visible";
modal3.style.display = "block";
noBits.style.visibility = 'visible';
startOverButton.style.visibility = 'visible';
created2 = false;
};
}
}
created2 = true;
});
};<head>
<meta charset="utf-8" />
<meta name="description" content="Bits Blades Belts">
<!--<meta name="keywords" content="VICOM-128, HTML Contact Form">-->
<meta name="keywords" content="Zund, Esko, Kongsberg, MCT, Mikkelsen">
<meta name="author" content="Nikolai Mikkelsen">
<!--Meta data above-->
<title>
Bits Blades Belts
</title>
<!--Title-->
<link rel="stylesheet" href="css/master.css">
<!--Link to style sheet-->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png">
</head>
<body>
<div class="page">
<header>
<div class="img_header">
<img src="images/headLogo.png" alt="HOME" />
<h1 class="blink">YOUR TRUSTED CONSUMABLES PROVIDER</h1>
</div>
</header>
<nav id="mobile_menu"></nav>
<nav id="nav_menu">
<ul>
<li>
<a href="index.html" title="Home">
<img src="images/home.png" alt="HOME" />
</a>
</li>
<li class="lastItem">
<a href="cnc_calculator.html">CNC CALCULATOR</a>
</li>
<li>
<a href="about.html">ABOUT US</a>
</li>
</ul>
</nav>
<main>
<article class="marginUpper boxit">
<h3>Welcome to the CNC Calculator</h3>
<p>
The CNC Calculator is the first step in developing a filtering system that will allow a customer to select a material and thickness of material to be processed. This will then provide a list of bits (products) that are compatible with the material and
thickness. Once the material and thickness are determined and the bit selected, the calculator will then ask the user to enter the max RPM of the spindle. From there the application will calculate the feed rate, number of passes, and the RPM
to process at.
</p>
<p>
<br />Next semester the goal is to port this to PHP and expand on it the functionality to be able to filter by machine (manufacture), material group, sub-category, system tool options available, and will then recommend the milling or cutting
tool and its feed rates, and if applicable, the number of passes and RPM.
</p>
</article>
<article class="marginUpper boxit">
<h3>Click Below To Select Start the CNC Calculator</h3>
</article>
<!-- Trigger/Open The Modal -->
<button id="startButton" class="button">OPEN CALCULATOR</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close1">×</span>
<select id="selectMaterial"></select>
<div id="thickness">
<!-- <input id="enterThickness"> -->
<input id='enterThickness' class="input" type="number" min="0" max="50" step="1" placeholder='Enter Material Thickness in Millimeters' /><span class="input-group-text"> /MM
</span>
</div>
<div id="rpm">
<!-- <input id="enterThickness"> -->
<input id='enterRPM' class="input" type="number" min="5000" max="60000" step="5000" placeholder='Enter Max Spindle RPM' /><span class="input-group-text"> /RPM </span>
</div>
<div id="bitList">
<button id="bitsButton" class="button">SHOW AVAILABLE MILLING BITS</button>
</div>
<!-- <button id="calcButton" class="calcButton">CALCULATE CUTTING PARAMETERS</button> -->
</div>
</div>
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close2">×</span>
<div id="displayInput"></div>
<select id="displayBits"></select>
<div id="selectBit">
<button id="selectBitsButton" class="button">SELECT BIT AND CALCULATE</button>
</div>
</div>
</div>
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close3">×</span>
<div id="noBits">No router bits are available for this material and/or thickness.
<button id="startOverButton" class="button">START OVER</button>
</div>
</div>
</div>
</div>
</main>
</body>
//
<script src="script.js"></script>
<!--Link to scripts-->
</html>