javascript - 如何让图片与按钮互动？-6ren

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

转载作者：行者123 更新时间：2023-12-03 03:12:59

*[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/

文章推荐： javascript - names.forEach 不是函数

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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