使用 JavaScript 弹出另一个页面

Question

我有一个主页，我有一个提供个人资料图片的图像，在我看到的商店中，我希望能够单击解锁按钮，图像应该使用 JavaScript 将当前图像替换为新图像，这是我到目前为止所做的;

主页视图

<div class="row">
<div class="col-md-6 mb-5 "style="border:4px solid black; padding-right: 100px;">
<img class ="img-fluid" src="<?php echo base_url().'assets/images/'.$img; ?>" width="250" height="auto">

店铺视图

<form id="1">
</div>
<div>
<div class="col-4 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-thumb bg-grey">
<i class="fa fa-camera"></i>   
<figure><a href=""> <img class ="img-circle" src="<?=base_url();?>/assets/images/hero1.png" width="250" height="150"></a><figcaption><h4><font color="black">This fearless warrior relies on his bulging muscles to wreck havoc on yor enemies, can be unlocked by achieving 5000 points</font></h4></figcaption></figure><input class="btn btn-success" type="submit" onclick="signupimg('hero1p.png');" id="btn1" value="unlock">
</div>
</div><br><p>
</form>
<script type="text/javascript">
function signupimg(y){
document.getElementById("signupimage").value = y;
document.getElementById("signupimage2").value = y;
}
</script>

控制器

public function shop()
{
$this->load->library('session');
$user_id = $this->session->userdata('user_id');
$this->load->view('shop');
}

Answer 1

要更改个人资料图像，您需要添加功能以click event其他图像，然后您需要检查用户是否累积了 5000 点(通过session或DB(，如果是，则更改个人资料图片的src。
我创建了一个工作片段，在认为必要时都会提及评论。看看它是否对你有帮助。

document.querySelector('#unlock_pic').addEventListener('click', (event) => { // add click event to other pic
// console.log(event.target.src)
// before changing the image, check the condition, if the user has 5000 points, if yes, save it in database, then do this ↓↓
document.querySelector('#profile_pic').src = event.target.src; // change the profile pic src
});

img {
height: 150px; 
width: 150px;
}

<img src="https://www.mightyplace.com/Images/Common/profile.jpg" id="profile_pic"/><!-- Your profile pic -->
<img src="https://pbs.twimg.com/profile_images/770394499/female_400x400.png" id="unlock_pic"/><!-- Your other pic-->