时间戳

首页 > 解决方案 > 基于填充的输入字段的具有多个变量的条件输出

javascript - 基于填充的输入字段的具有多个变量的条件输出

问题描述

我正在开发一个小型 UTM 构建器工具，该工具根据用户在多个输入字段中输入的文本输出一个长 URL，如下所示：

<input id="utm_website" placeholder="https://" onkeyup="formChanged()" onchange="formChanged()">

我使用的表单有 6 个输入字段，前 3 个是必需的，后 3 个字段可以有条件地使用。例如，字段 1、2、3、5 和 6 有输入，而字段 5 没有输入。

我得到了这一切，除了一件事。现在我已经创建了多个条件，但它们只有在输入字段以逻辑方式填写时才有效，如字段 1-3、1-4、1-5 和 1-6。

function formChanged() {    
        
        // Get all input values         
        let utmWebsite = document.getElementById('utm_website').value; //required value
        let utmSource = document.getElementById('utm_source').value; //required value
        let utmMedium = document.getElementById('utm_campaign').value; //required value
        let utmName = document.getElementById('utm_name').value;
        let utmTerm = document.getElementById('utm_term').value;
        let utmContent = document.getElementById('utm_content').value;
        
        // Enrich all input values with UTM tags
        let enrichSource = '?utm_source=' + utmSource;      
        let enrichMedium = '&utm_medium=' + utmMedium;
        let enrichName = '&utm_campaign=' + utmName;
        let enrichTerm = '&utm_term=' + utmTerm;
        let enrichContent = '&utm_content=' + utmContent;

        // Combine them all if at least website, source and medium are defined
        
        if( utmWebsite && utmSource && utmMedium ){
        utmLink = utmWebsite + enrichSource + enrichMedium
                    
        // Output the UTM link
        document.getElementById('utm_result').innerHTML=utmLink;            
        }
        
        // Also add name to the output if defined
        if( utmWebsite && utmSource && utmMedium && utmName ){
        utmLinkName = utmWebsite + enrichSource + enrichMedium + enrichName
                    
        // Output the UTM link
        document.getElementById('utm_result').innerHTML=utmLinkName;        
        }
        
        // Also add name & term to the output if defined
        if( utmWebsite && utmSource && utmMedium && utmName && utmTerm ){
        utmLinkNameTerm = utmWebsite + enrichSource + enrichMedium + enrichName + enrichTerm
                    
        // Output the UTM link
        document.getElementById('utm_result').innerHTML=utmLinkNameTerm;
        }
        
        // Also add name & term & content to the output if defined
        if( utmWebsite && utmSource && utmMedium && utmName && utmTerm && utmContent ){
        utmLinkNameTermContent = utmWebsite + enrichSource + enrichMedium + enrichName + enrichTerm + enrichContent
                    
        // Output the UTM link
        document.getElementById('utm_result').innerHTML=utmLinkNameTermContent;         
        }           
        
    };

我对 JavaScript 很陌生，如果以随机顺序使用两个非必填字段之一，我的“解决方案”感觉太复杂并且不起作用。我已经在寻找解决方案，但由于缺乏 JavaScript 知识，我可能使用了错误的搜索词。

有没有办法更改代码以使其工作？

标签： javascript

解决方案

如果定义了字段，您可以只附加字段，而不是每次都创建一个全新的 URL 字符串。

首先检查您所需的参数是否像您正在做的那样定义。

if( utmWebsite && utmSource && utmMedium ){
    utmLink = utmWebsite + enrichSource + enrichMedium;
}

然后在同一个块中，检查每个可选的，如果已定义则附加它。

if( utmWebsite && utmSource && utmMedium ){
    utmLink = utmWebsite + enrichSource + enrichMedium;
    
    if(utmName) utmLink += enrichName;
    if(utmTerm) utmLink += enrichTerm;
    if(utmContent) utmLink += enrichContent;

    document.getElementById('utm_result').innerHTML=utmLink;
}

推荐阅读