在 TYPO3/Fluid 模板中使用 JavaScript

Question

首先对不起我的英语不好。

我正在处理 TYPO3 模板中的问题表单，我在模板中使用方法 getElementeryById() 和 onclick()，但在输出中，div /div 之间的每个问题都没有显示。

我尝试删除：(style.display="none") 它可以工作，但方式不正确，我希望在我选择是或否时出现问题，而不是总是出现

我不知道为什么我不能把代码放在这里，这是我第一天卡住溢出！而且我对此了解不多。

模板.html：

<ul>
    question 1 ? <br>
    
    <f:form.textfield name="fonc" value="" placeholder="entre fonc name" /> <br>
    question 2 ? <br>
    oui<f:form.radio name="featureExists" value="1" onclick="featureExists()" id="featureExists" />
    non<f:form.radio name="featureExists" value="0" onclick="featureExists()" id="featureDoesnotExists" />
    <br>


    <div id="ifFeatureExists"  >
       question 3 ? <br>
    oui<f:form.radio name="tjrUtilise" value="1" onclick="javascript:tjrUtilise();" id="tjrUtilise" />
    non<f:form.radio name="tjrUtilise" value="0" onclick="javascript:tjrUtilise();" id="pasUtilise" />
    </div>
   
   
    <div id="ifFeatureDoesnotExists"  >
    <f:flashMessages result 1 />
    </div>
    
   
    <div id="ifTjrUtilise">
    question 4? <br>
    oui<f:form.radio name="TER" value="1" onclick="javascript:ter();" id="ter" />
    non<f:form.radio name="TER" value="0" onclick="javascript:ter();" id="nonTer" />
    </div>
   
   
    <div id="ifPasUtilise"  >
       <f:flashMessages result 2 />
    </div>
   
   
    <div id="ifTer" >
    question 5? <br>
    oui<f:form.radio name="compatible" value="1" onclick="javascript:compatible();" id="Compatible" />
    non<f:form.radio name="compatible" value="0" onclick="javascript:compatible();" id="pasCompatible" />
    </div>
   
   
    <div id="ifNonTer" >
    question 6?  <br>
    oui<f:form.radio name="emag" value="1" onclick="javascript:emag();" id="Emag" />
    non<f:form.radio name="emag" value="0" onclick="javascript:emag();" id="pasEmag" />
    </div>
    
     
    <div id="ifCompatible" >
    
    <f:flashMessages result 3 />
     
    </div>
   
   
    <div id="ifNonCompatible" >
    <f:flashMessages result 4 />
    </div>
  
    
     <div id="ifEmag" style="display:none" >
    question 7 ?  <br>
    oui<f:form.radio name="extVerCompatible" value="1" onclick="javascript:extVerCompatible();" id="extVerCompatible" />
    non<f:form.radio name="extVerCompatible" value="0" onclick="javascript:extVerCompatible();" id="extVerNonCompatible" />
    </div>
   
   
    <div id="ifNonEmag" style="display:none" ><br>
    question 8?<br>
    <f:form.textfield name="extename" value="" placeholder="Enter extension" /> <br>
    </div>
    
</ul>
    
<f:form.submit value="send" />

要使用的 JavaScript

window.onload = function() {
    document.getElementById('ifFeatureExists').style.display = 'none';
    document.getElementById('ifFeatureDoesnotExists').style.display = 'none';
}
function featureExists() {
    if (document.getElementById('featureExists').checked) {
        document.getElementById('ifFeatureExists').style.display = 'block';
        document.getElementById('ifFeatureDoesnotExists').style.display = 'none';
    }
    if(document.getElementById('featureDoesnotExists').checked) {
        document.getElementById('ifFeatureDoesnotExists').style.display = 'block';
        document.getElementById('ifFeatureExists').style.display = 'none';
   }
}
function tjrUtilise() {
   if(document.getElementById('tjrUtilise').checked) {
       document.getElementById('ifTjrUtilise').style.display = 'block';
       document.getElementById('ifPasUtilise').style.display = 'none';
    } 
    if(document.getElementById('pasUtilise').checked) {
       document.getElementById('ifPasUtilise').style.display = 'block';
       document.getElementById('ifTjrUtilise').style.display = 'none';
    }
}
function ter() {
   if(document.getElementById('Ter').checked) {
       document.getElementById('ifTer').style.display = 'block';
       document.getElementById('ifNonTer').style.display = 'none';
    }
   if(document.getElementById('nonTer').checked) {
       document.getElementById('ifNonTer').style.display = 'block';
       document.getElementById('ifTer').style.display = 'none';
    }
}
function compatible() {
   if(document.getElementById('Compatible').checked) {
       document.getElementById('ifCompatible').style.display = 'block';
       document.getElementById('ifNonCompatible').style.display = 'none';
    }
   if(document.getElementById('pasCompatible').checked) {
       document.getElementById('ifNonCompatible').style.display = 'block';
       document.getElementById('ifCompatible').style.display = 'none';
    }
}
function emag() {
   if(document.getElementById('Emag').checked) {
       document.getElementById('ifEmag').style.display = 'block';
       document.getElementById('ifNonEmag').style.display = 'none';
    }
   if(document.getElementById('pasEmag').checked) {
       document.getElementById('ifNonEmag').style.display = 'block';
       document.getElementById('ifEmag').style.display = 'none';
    }
}
function extVerCompatible() {
   if(document.getElementById('extVerCompatible').checked) {
       document.getElementById('ifextVerCompatible').style.display = 'block';
       document.getElementById('ifextVerNonCompatible').style.display = 'none';
    }
   if(document.getElementById('extVerNonCompatible').checked) {
       document.getElementById('ifextVerNonCompatible').style.display = 'block';
       document.getElementById('ifextVerCompatible').style.display = 'none';
    }
}

Answer 1

首先，使用一些代码检查来验证您的 JS 是否正确呈现。请记住，由于在 JS 和 Fluid 中使用大括号，有时会因为两种解决方案的语法冲突而很难甚至不可能实现。相反，您可以做的不是在 Fluid 模板中放置任何内联 JavaScript，而是将其放置在单独的 *.js 文件中，并使用 TypoScript 包含在页面的头部或底部。

如果您确实需要内联 JavaScript，则可以选择创建您自己的 ViewHelper，它只会将 JS 代码渲染到您的 Fluid 模板中。

无论如何，在更详细的问题之后，您不需要为此使用 ViewHelper。

编辑：

根据这个答案https://stackoverflow.com/a/22038893/1066240在表单中，您不应该为id使用相同的名称和onclick函数的名称，而是使用唯一的名称，即在所有函数名称中添加Func后缀：

function featureExistsFunc() {
    console.log('FE');
    if (document.getElementById('featureExists').checked) {
        document.getElementById('ifFeatureExists').style.display = 'block';
        document.getElementById('ifFeatureDoesnotExists').style.display = 'none';
    }
    if(document.getElementById('featureDoesnotExists').checked) {
        document.getElementById('ifFeatureDoesnotExists').style.display = 'block';
        document.getElementById('ifFeatureExists').style.display = 'none';
    }
}  

并在您的表单中将其用作：

question 2 ? <br>
<label>oui<input id="featureExists" onclick="featureExistsFunc()" type="radio" name="featureExists" value="1"/></label>
<label>non<input id="featureDoesnotExists" onclick="featureExistsFunc()" type="radio" name="featureExists" value="0"/></label> <br>

<div id="ifFeatureExists" >
    question 3 ? <br>
    oui<input id="tjrUtilise" onclick="javascript:tjrUtiliseFunc();" type="radio" name="tjrUtilise" value="1" />
    non<input id="pasUtilise" onclick="javascript:tjrUtiliseFunc();" type="radio" name="tjrUtilise" value="0" />
</div>

对其他功能进行相同的更改。

我在本地对其进行了测试，它可以正常工作。

Answer 2

您如何只对yes 和no 按钮使用onlick 方法并使用条件来确定将显示什么问题。