如何通过action属性关联JS脚本与HTML表单，实现表单数据同步至profile页面？

你的核心问题是跨页面DOM操作无效，以及没有正确传递表单数据——sign-up和profile是两个独立的页面，在sign-up里直接操作profile的DOM元素根本行不通，因为后者还没加载，且两个页面的JS上下文完全隔离。下面给你两种简单易实现的解决方案：

方案一：用localStorage存储数据（推荐，适合保存稍复杂内容） #

1. 改造sign-up页面的提交逻辑 #

修改submission函数，先阻止表单默认跳转，把数据存入浏览器本地存储，再手动跳转到profile页面：

function submission(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 获取表单输入值（确保每个输入框都设置了对应的id）
  const username = document.getElementById('username').value;
  const avatar = document.getElementById('avatar').value;
  const email = document.getElementById('email').value;
  const bio = document.getElementById('bio').value;
  
  // 将数据转为JSON存入localStorage
  localStorage.setItem('userProfile', JSON.stringify({
    username,
    avatar,
    email,
    bio
  }));
  
  // 手动跳转到profile页面
  window.location.href = 'profile.html';
}

同时修改表单标签，传递事件参数：

<form onsubmit="submission(event)">

2. 在profile页面读取数据并渲染 #

在profile.html的脚本中，页面加载时读取localStorage的数据，填充到对应DOM元素：

window.addEventListener('DOMContentLoaded', () => {
  // 读取并解析本地存储的数据
  const profileData = JSON.parse(localStorage.getItem('userProfile'));
  
  if (profileData) {
    // 替换为你profile页面中对应元素的id
    document.getElementById('profile-username').textContent = profileData.username;
    document.getElementById('profile-avatar').src = profileData.avatar;
    document.getElementById('profile-email').textContent = profileData.email;
    document.getElementById('profile-bio').textContent = profileData.bio;
    
    // 可选：用完后清除本地存储，避免刷新页面仍显示旧数据
    // localStorage.removeItem('userProfile');
  }
});

方案二：用URL参数传递数据（适合简单短内容） #

1. 改造sign-up页面的提交逻辑 #

通过构造带参数的URL传递数据：

function submission(e) {
  e.preventDefault();
  
  // 编码特殊字符，避免URL解析错误
  const username = encodeURIComponent(document.getElementById('username').value);
  const avatar = encodeURIComponent(document.getElementById('avatar').value);
  const email = encodeURIComponent(document.getElementById('email').value);
  const bio = encodeURIComponent(document.getElementById('bio').value);
  
  // 构造带参数的跳转URL
  const targetUrl = `profile.html?username=${username}&avatar=${avatar}&email=${email}&bio=${bio}`;
  window.location.href = targetUrl;
}

2. 在profile页面读取URL参数并渲染 #

解析URL中的参数，填充到页面：

window.addEventListener('DOMContentLoaded', () => {
  // 获取URL参数
  const urlParams = new URLSearchParams(window.location.search);
  
  // 提取参数值
  const username = urlParams.get('username');
  const avatar = urlParams.get('avatar');
  const email = urlParams.get('email');
  const bio = urlParams.get('bio');
  
  if (username) {
    // 填充到对应DOM元素
    document.getElementById('profile-username').textContent = username;
    document.getElementById('profile-avatar').src = avatar;
    document.getElementById('profile-email').textContent = email;
    document.getElementById('profile-bio').textContent = bio;
  }
});

关键注意点 #

• 确保每个输入框和profile页面的展示元素都设置了唯一且对应的id，否则JS无法正确获取元素。
• 不要尝试在sign-up页面操作profile页面的DOM——两个页面是独立的，只能通过数据传递的方式实现内容同步。

内容的提问来源于stack exchange，提问作者solo1999