如何使图片与按钮互动？

时间：2017-10-23 11:04:03

标签： javascript html

* [1]：https://i.stack.imgur.com/WmJv1.jpg 大家好，我想提前感谢任何帮助。 我对整个编码世界都很陌生，所以我有一个项目要做。我已经将HTML文件设置为我想要的外观等等....我目前唯一的问题是，我不确定如何使用javascript来使按钮工作，存储信息。有没有人会分享如何使床变得互动？我想一旦我可以让床与按钮交互，我可以在其余部分玩一下，看看我是如何上场的。

＆＃13;
＆＃13; 
<!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">
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
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
  );
}
＆＃13; 
    body { 
      background-color: lightblue;
      border: groove 4px;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我希望评论足够你

答案 1 :(得分：0)

可能导致您无法工作的一个问题是，在您提供的示例代码中，您没有正确关闭起始div标签和一对标签。 你已经放了...应该有帮助，但是对于按钮看起来你已经做得对了但是在你的js文件或脚本标签中你只是把

Female_OnClick() {  
    what you want it to do   
}

尝试正确关闭所有标签，并尝试javascript的东西，如果它仍然无法工作告诉我，我可以帮助......

相关问题
最新问题