gpt4 book ai didi

javascript - 如何让图片与按钮互动?

转载 作者:行者123 更新时间:2023-12-03 03:12:59 26 4
gpt4 key购买 nike

*[1]:/image/WmJv1.jpg大家好,我想提前感谢任何帮助。我对整个编码世界都很陌生,所以我有一个项目要做。我已经将 HTML 文件设置为我想要的外观等等......我目前遇到的唯一问题是,我不确定如何使用 javascript 使按钮工作并存储信息。有人能分享一些关于如何让床变得互动的信息吗?我想一旦我能让床与按钮进行交互,我就可以尝试一下其余的部分,看看我进展如何。

<!DOCTYPE html>
<html>
<head>

<title> Ward Beds </title>

<style>

body{ border: groove 4px; }

</style>
</head>
<body bgcolor="LIGHTSKYBLUE">

<form
<div
</div>
<p>

</p>
<img id="Bed1" src="bedleftempty.gif" /> <img id="Bed5" src="BedREmpty.gif" />

<div
</div>
<img id="Bed2" src="bedleftempty.gif" /> <img id="Bed6" src="BedREmpty.gif" />

<div
</div>
<img id="Bed3" src="bedleftempty.gif" /> <img id="Bed7" src="BedREmpty.gif" />

<div
</div>
<img id="Bed4" src="bedleftempty.gif" /> <img id="Bed8" src="BedREmpty.gif" />
<div
</div>

<center>

<input id="btnAdmit" type="button" value="Admit"
onclick="btnAdmit_OnClick()" > <input id="btnDischarge" type="button" value="Discharge"
onclick="btnDischarge_OnClick()" />
<div
</div>
<p>
<input id="btnMale" type="button" value="Male"
onclick="btnMale_OnClick()" />


<div
</div>
<input id="btnFemale" type="button" value="Female"
onclick="btnFemale_OnClick()" />
<div
</div>
<input id="btnUnknown" type="button" value="Unknown"
onclick="btnUnknown_OnClick()" />
<div
</div>
</p>
<p>
<label>First Name</label> <input type="text" id="myText" value=" " /> <label>Last Name</label> <input type="text" id="myText" value=" " />
</p>
<label> Location of Surgery</label>
<div
</div>
<input type="checkbox" name="LeftArm" value="LeftLeg"> LeftArm<br> />
<div
</div>
<input type="checkbox" name="RightArm" value="RightLeg" > RightArm<br> />
<div
</div>
<input type="checkbox" name="LeftLeg" value="LeftLeg"> LeftLeg<br> />
<div
</div>
<input type="checkbox" name="RightLeg" value="RightLeg"> RightLeg<br> />
<div
</div>
<input type="checkbox" name="Unknown" value="Unknown"> Unknown<br> />
<div
</div>
<input type="checkbox" name="Head" value="Head"> Head<br> />
<div
</div>
<input type="checkbox" name="Chest" value="Chest"> Chest<br> />
<div
</div>
<input type="checkbox" name="Abdomen" value="Abdomen"> Abdomen<br> />
<div
</div>

<input type="submit" value="Submit">
</form>


</body>
</html>

<script language="javascript">

最佳答案

我的建议是从简单的 HTML 教程开始。因为有很多无效的html和一些无效的css。

function GetId(id) { return document.getElementById(id) }

// Store information for eatch bed in an array
var beds = [],
// Stores amount of max beds
maxBeds = 8,
// Get beds paragraph
htmlBeds = GetId("beds");

// Loops the amount of maxBeds by increasing i eatch time
for (let i = 0; i < maxBeds; i++) {
// Add an empy bed.
htmlBeds.innerHTML += '<img id="Bed'+(i+1)+'" src="http://mtdef.com/Lib/Img/StackOverflow/bed.png" onclick="bed_Onclick('+i+')"> ';
if (i % 2) htmlBeds.innerHTML += '<br>';
}

//functions you request from the html
function btnAdmit_OnClick() {
let gender, fullName, surgeryLocation = "";
if (GetId('btnMale').checked) gender = "Male";
if (GetId('btnFemale').checked) gender = "Female";
if (GetId('btnUnknown').checked) gender = "Unknown";

fullName = GetId('FirstName').value + " " + GetId('LastName').value;

// Loop 8 times over the Location of Surgery by increasing i eatch time.
for (let i = 0; i < 8; i++) {
let LoS = GetId("LoS"+i);
if (LoS.checked) surgeryLocation += LoS.value + " ";
}

//push patient object to array
beds.push({
gender:gender,
fullName:fullName,
surgeryLocation:surgeryLocation
});
}

//removes last added patient
function btnDischarge_OnClick() {
beds.splice(-1,1);
}

//shows patients stats
function bed_Onclick(bedId) {
if (beds[bedId] === undefined) console.log("bed: " + (bedId+1) +
"\nis empty");
else console.log("bed: " + (bedId+1) +
"\ngender: " + beds[bedId].gender +
"\nfull name: " + beds[bedId].fullName +
"\nlocation of surgery: " + beds[bedId].surgeryLocation
);
}
    body { 
background-color: lightblue;
border: groove 4px;
}
<center> 
<!-- Get filled by JavaScript -->
<p id=beds></p>
<input id="btnAdmit" type="button" value="Admit" onclick="btnAdmit_OnClick()" >
<input id="btnDischarge" type="button" value="Discharge" onclick="btnDischarge_OnClick()" >
<p>
<input id="btnMale" type="radio" name="gender" value="Male">
<label for="btnMale">Male</label><br>
<input id="btnFemale" type="radio" name="gender" value="Female">
<label for="btnFemale">Female</label><br>
<input id="btnUnknown" type="radio" name="gender" value="Unknown" checked="checked">
<label for="btnUnknown">Unknown</label><br>
</p>
<p>
<label>First Name</label>
<input type="text" id="FirstName" value="John"> <br>
<label>Last Name</label>
<input type="text" id="LastName" value="Doe">
</p>
<label> Location of Surgery</label><br>
<input type="checkbox" id="LoS0" value="LeftArm"> LeftArm<br>
<input type="checkbox" id="LoS1" value="RightArm" > RightArm<br>
<input type="checkbox" id="LoS2" value="LeftLeg"> LeftLeg<br>
<input type="checkbox" id="LoS3" value="RightLeg"> RightLeg<br>
<input type="checkbox" id="LoS4" value="Unknown"> Unknown<br>
<input type="checkbox" id="LoS5" value="Head"> Head<br>
<input type="checkbox" id="LoS6" value="Chest"> Chest<br>
<input type="checkbox" id="LoS7" value="Abdomen"> Abdomen<br>
<input type="submit" value="Submit">
</center>

我希望这些评论对你来说足够了

关于javascript - 如何让图片与按钮互动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46887807/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com