Check Radio buttons (stumped)

Hello!
I’m practicing with firebase. The issue I having is with the radio buttons. You click on one radio to update a field. Once you click on UPDATE, nothing happens. tabel looks like this

-Item
-001
-itemID: “001”
-itemTItle: “Somthin”
-itemQTY: “4”
-itemPrice: “3.50”

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" media="all" href="style.css">

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/5.0.4/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/5.0.4/firebase-auth.js"></script>
    <script defer src="/__/firebase/5.0.4/firebase-database.js"></script>
    <script defer src="/__/firebase/5.0.4/firebase-messaging.js"></script>
    <script defer src="/__/firebase/5.0.4/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
    
  </head>
  <body>

    <div class="navHeader">
    	<h1>Inventory App</h1>
    	<ul>
    		<li><a href="index.html">Overview</a></li>
    		<li><a href="Adjust.html">Adjust</a></li>
    		<li><a href="History.html">History</a></li>
    	</ul>
    </div>
    
    <div class="add2DB">
    	<textarea id="getID" placeholder="Enter Product's barcode"></textarea>
    	<textarea id="getTitle" placeholder="Enter Product's Name"></textarea>
    	<textarea id="getQTY" placeholder="Enter Quantity of Product"></textarea>
    	<textarea id="getPrice" placeholder="Enter Product's Price Per Unit"></textarea>
    	<button id="submit" onclick="getInfo()">ADD!</button>
    </div>
    
    <div>
    	<textarea id="udID" placeholder="Barcode"></textarea>
    	<textarea id="udInfo" placeholder="Update"></textarea>
    	<br>
    	<label id="code">Code<input type="radio"></label>
    	<label id="name">Name<input type="radio"></label>
    	<label id="qty">QTY<input type="radio"></label>
    	<label id="price">Price<input type="radio"></label>
    	<button id="radioButton" onclick="update()">UPDATE!</button>
    </div>
    
    <script type="text/javascript">
	  var submitInfo = document.getElementById("submit");
	  var upDateInfo = document.getElementById("radioButton");
		
		function getInfo()
		{
			var textID = document.getElementById("getID").value;
			var textTitle = document.getElementById("getTitle").value;
			var textQTY = document.getElementById("getQTY").value;
			var textPrice = document.getElementById("getPrice").value;
			var firebaseRef = firebase.database().ref("Item/");
			
			firebaseRef.child(textID).set({
				itemID: textID,
				itemTitle: textTitle,
				itemQTY: textQTY,
				itemPrice: textPrice
			});
			
			document.getElementById("getID").value = " ";
			document.getElementById("getTitle").value = " ";
			document.getElementById("getQTY").value = " ";
			document.getElementById("getPrice").value = " ";
		}
		
		function update()
		{
			var radioID = document.getElementById("udID").value;
			var radioInfo = document.getElementById("udInfo").value;
			var radioRef = firebase.database().ref("Item/");
			
			if(document.getElementById("code").checked){
				radioRef.child(radioID).update({
					itemID: radioInfo
				});
			}
			else if(document.getElementById("name").checked){
				radioRef.child(radioID).update({
					itemTitle: radioInfo
				});
			}
			else if(document.getElementById("qty").checked){
				radioRef.child(radioID).update({
					itemQTY: radioInfo
				});
			}
			else if(document.getElementById("price").checked){
				radioRef.child(radioID).update({
					itemPrice: radioInfo
				});
			}
				
		}
	  </script>
  </body>
</html>

When you say nothing happens, does the event get fired? Does the variable get set? Did you turn it off and on again?

1 Like

sometimes you need to walk away and realize what you’re doing wrong. The id’s are inside the label tag and not in the input tag.