在 TYPO3/Fluid 模板中使用 JavaScript

Question

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

我正在处理 TYPO3 模板中的问题表格，我在模板中使用getElementeryById()和onclick()方法，但在 output 中，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。

编辑：

According to this answer https://stackoverflow.com/a/22038893/1066240 within the form, you should not use the same name for id and name of the onclick function, instead use unique name, ie by adding Func suffix to all function名称：

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方法并使用条件来确定将显示什么问题。