求助：基于弹窗分布曲线与ETC金额填充Adjustments字段

我来给你梳理一下实现这个需求的具体步骤，都是很实用的前端操作，你跟着做就能搞定啦～

1. 先给页面元素加标识，方便JS定位 #

首先我们要给主页面的三个调整项输入框和弹窗里的ETC输入框加上id，这样JavaScript能快速找到它们：

主页面代码修改 #

<table>
  <tr>
    <td> <a href="skew.html" onClick="return popup(this, 'notes')">Contour</a> </td>
    <td> <input name="0" id="adjustment0" type="text" />&nbsp; </td>
    <td> <input name="1" id="adjustment1" type="text" />&nbsp; </td>
    <td> <input name="2" id="adjustment2" type="text" />&nbsp; </td>
  </tr>
</table>
<br/>

弹窗页面代码修改 #

这里还修正了ETC输入框的type（是text不是textbox），并给提交按钮绑定了自定义处理函数：

<table>
  <tr>
    <td>Choose Contour: 
      <input type="radio" name="skew0" value="neg"> 
      <img src="imgs/0.jpg" width="20px" alt="负偏态曲线（10%、25%、65%）">
    </td>
    <td align="center">
      <input type="radio" name="skew0" value="pos"> 
      <img src="imgs/1.jpg" width="20px" alt="正偏态曲线（65%、25%、10%）">
    </td>
    <td>
      <input type="radio" name="skew0" value="no"> 
      <img src="imgs/2.jpg" width="20px" alt="正态分布（20%、60%、20%）">
    </td>
  </tr>
  <tr>
    <td>ETC Total Value:</td>
    <td colspan="2" align="right"> 
      <input type="text" id="etcTotal">
    </td>
  </tr>
  <tr>
    <td colspan="3" align="right">
      <input type="button" value="submit" onclick="handleSubmit()">
    </td>
  </tr>
</table>

2. 编写弹窗的提交处理逻辑 #

在弹窗页面里添加一段JavaScript代码，负责获取用户选择的曲线和输入的金额，计算比例后填充到主页面：

function handleSubmit() {
  // 第一步：检查用户是否选中了分布曲线
  const selectedCurve = document.querySelector('input[name="skew0"]:checked');
  if (!selectedCurve) {
    alert('请先选择一条分布曲线哦！');
    return;
  }
  const curveType = selectedCurve.value;

  // 第二步：获取并校验ETC总金额
  const etcInput = document.getElementById('etcTotal');
  const etcAmount = parseFloat(etcInput.value);
  if (isNaN(etcAmount) || etcAmount <= 0) {
    alert('请输入有效的ETC总金额！');
    etcInput.focus();
    return;
  }

  // 第三步：定义不同曲线对应的分配比例
  let ratioList;
  switch(curveType) {
    case 'neg': // 第一条曲线：10%、25%、65%
      ratioList = [0.1, 0.25, 0.65];
      break;
    case 'pos': // 正偏态曲线我默认设成反向比例，你可以根据实际需求调整
      ratioList = [0.65, 0.25, 0.1];
      break;
    case 'no': // 正态分布：20%、60%、20%
      ratioList = [0.2, 0.6, 0.2];
      break;
    default:
      alert('未知的分布类型，请重新选择！');
      return;
  }

  // 第四步：计算并填充到主页面的输入框
  const mainPage = window.opener;
  if (mainPage && !mainPage.closed) {
    const adjInput0 = mainPage.document.getElementById('adjustment0');
    const adjInput1 = mainPage.document.getElementById('adjustment1');
    const adjInput2 = mainPage.document.getElementById('adjustment2');
    
    // 保留两位小数，如果你不需要可以去掉.toFixed(2)
    adjInput0.value = (etcAmount * ratioList[0]).toFixed(2);
    adjInput1.value = (etcAmount * ratioList[1]).toFixed(2);
    adjInput2.value = (etcAmount * ratioList[2]).toFixed(2);
  }

  // 第五步：关闭弹窗
  self.close();
}

3. 确保主页面的弹窗打开函数正确 #

主页面里的popup函数要保证是用window.open打开弹窗，这样才能实现弹窗和主页面的通信：

function popup(link, windowName) {
  // 可以根据需求调整弹窗的宽高
  window.open(link.href, windowName, 'width=450,height=220');
  return false; // 阻止链接的默认跳转行为
}

几个关键注意点 #

• 同源策略：主页面和弹窗页面必须在同一个域名下（比如都是你的本地服务器或者同一个网站），否则浏览器会阻止弹窗访问主页面的元素
• 用户体验优化：可以给单选按钮加默认选中项，比如给正态分布的按钮加checked属性：<input type="radio" name="skew0" value="no" checked>
• 金额格式：toFixed(2)是保留两位小数，如果你需要整数或者更多小数位，直接修改括号里的数字就行

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