时间戳

首页 > 解决方案 > HTML JAVASCRIPT：向页面元素添加随机值

javascript - HTML JAVASCRIPT：向页面元素添加随机值

问题描述

我是 Web 开发的初学者，我创建了一个网站，其中有这样的产品页面：

我的产品页面

现在我也在这些产品下做了一个简单的按钮。通过使用 javascript 单击该按钮，您必须随机检查页面的一些“购买我”复选框。如果选中一个框，则必须为选中该框的书的数量（数量）分配 1-5 之间的随机值。最后，所有这些产品的总和必须添加到我在书籍上方的橙色购物车中。我已经编写了有关此任务的代码，但我的问题是如何遍历每个产品并随机检查一个框并在金额上加上一个数字，因为当我按下激活此功能的按钮时没有任何变化我的代码如下（假设我有 2产品 ）：

  function randomfunc(){
   
    var c = document.getElementById("cart"); //get the cart
    var sum =0; //the sum of products that has to be displayed next to cart
	
	for(var i =0;i<6;i++)
	{
	  var flag = Math.floor(Math.random()*0)+1; //random num between 1 and 0 
        var p = document.getElementsByClass("p-price");//get price

	  var y=document.getElementsByClass("buyme").elements[i];//get the checkboxes
	  var x=document.getElementsByClass("amount").elements[i].value;//get the amounts of each prod
	  if(flag==0)
	  {
	    x=x.checked;//check the box
		  y= Math.floor(Math.random()*1)+5;//assign random num to amount
		
	  }
	  
	  else if(flag==1){
	     
		 x = !(x.checked); //uncheck the box if i have checked it before pressing the button 
	    }
	   
	   sum+=y*p;
	   
	   
	}
	
     c.innerHTML= (sum + &euro;);
  
  
  
  
  }
 <img src = "IMAGES/shopcart.png"  id = "cart"alt = cart/> = "" (price of selected products)  
 
<div id="p-float">

 
 <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\work.jpg" alt = deepw/ ><br/>
            <div class="p-name">Deep </br>Work </div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" name = "box" value = "Buy me"/> Buy Me  </div></center>
     </div></div>



	  <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\giant.jpg" alt = gnt/ ><br/>
            <div class="p-name">Awaken the giant within</div>
		    <div class="p-price">$9.99</div>
			<div class = "amount"> Amount:<input type = "number" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" name = "box" value = "Buy me"/> Buy Me  </div></center>
     </div></div> 



</div>

  <button class = "randbtn" onclick="randomfunc()"> Select random products </button>

感谢您帮助指导我解决这个问题（抱歉有些书名，但我没有另一页......）

标签： javascripthtmlrandomcheckbox

解决方案

问题在于您的代码的这一部分：

  var y=document.getElementsByClass("buyme").elements[i];//get the checkboxes
  var x=document.getElementsByClass("amount").elements[i].value;//get the amounts of each prod
  if(flag==0)
  {
    x=x.checked;//check the box
      y= Math.floor(Math.random()*1)+5;//assign random num to amount

  }

您正在尝试创建包含访问对象的对象/值的新变量，这些变量不会引用原始对象。它也应该读取getElementsByClassName而不是getElementsByClass（按 F12 并检查控制台选项卡是否有错误）。

相反，您必须直接在 DOM 对象上设置属性：

if (flag===0) {
  document.getElementsByClassName('buyme')[i].checked = 'checked';
  document.getElementsByClassName('amount')[i].value= Math.floor(Math.random()*5)+1;
}

推荐阅读