使用 javascript 填充另一个页面答案

【问题标题】：pouplate another page using javascript使用 javascript 填充另一个页面
【发布时间】：2020-09-27 04:37:53
【问题描述】：

我有一个主页，其中我有一张图片提供个人资料图片，在我的商店视图中，我希望能够单击解锁按钮，并且该图片应使用 javascript 将当前图片替换为新图片，here是我到目前为止所做的；

主页视图

<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');
    }

【问题讨论】：

标签： javascript php html codeigniter

【解决方案1】：

要更改个人资料图片，您需要在另一张图片上为click event添加功能，然后您需要检查用户是否累积了5000分（通过session或DB），如果是，则更改个人资料图片的src。
我创建了一个有效的 sn-p，只要认为有必要，就会提到 cmets。看看对你有没有帮助。

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-->

【讨论】：