在 TYPO3/Fluid 模板中使用 JavaScript
Using JavaScript in TYPO3/Fluid template
首先抱歉我的英语不好
我正在 TYPO3 模板中处理问题表单,我在模板中使用方法 getElementeryById()
和 onclick()
,但在输出中,[=34= 之间的每个问题] /div 不显示。
我尝试删除:(style.display="none")
它有效,但不是以正确的方式,我希望当我选择是或否时出现问题,而不是总是出现
我不知道为什么我不能把代码放在这里,这是我卡住溢出的第一天!而我对此了解不多。
template.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';
}
}
如何只对 yes
和 no
按钮使用 onlick
方法,并使用条件来确定将显示什么问题。
首先,使用一些代码检查来验证您的 JS 是否正确呈现。请记住,由于在 JS 和 Fluid 中使用大括号,有时会因为两种解决方案的语法冲突而难以甚至无法实现。相反,您可以做的是不要在 Fluid 模板中放置任何内联 JavaScript,而是将其放置在单独的 *.js 文件中,并使用 TypoScript 将其包含在页面的头部或底部。
如果您确实需要放置 JavaScript 内联,则可以选择创建您自己的 ViewHelper,它只会将 JS 代码呈现到您的 Fluid 模板中。
无论如何,在更详细的问题之后,您不需要为此使用 ViewHelper。
编辑:
根据这个答案 在表单中,您不应该为 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>
对其他功能进行相同的更改。
我在本地测试了它,它正常工作。
首先抱歉我的英语不好
我正在 TYPO3 模板中处理问题表单,我在模板中使用方法 getElementeryById()
和 onclick()
,但在输出中,[=34= 之间的每个问题] /div 不显示。
我尝试删除:(style.display="none")
它有效,但不是以正确的方式,我希望当我选择是或否时出现问题,而不是总是出现
我不知道为什么我不能把代码放在这里,这是我卡住溢出的第一天!而我对此了解不多。
template.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';
}
}
如何只对 yes
和 no
按钮使用 onlick
方法,并使用条件来确定将显示什么问题。
首先,使用一些代码检查来验证您的 JS 是否正确呈现。请记住,由于在 JS 和 Fluid 中使用大括号,有时会因为两种解决方案的语法冲突而难以甚至无法实现。相反,您可以做的是不要在 Fluid 模板中放置任何内联 JavaScript,而是将其放置在单独的 *.js 文件中,并使用 TypoScript 将其包含在页面的头部或底部。
如果您确实需要放置 JavaScript 内联,则可以选择创建您自己的 ViewHelper,它只会将 JS 代码呈现到您的 Fluid 模板中。
无论如何,在更详细的问题之后,您不需要为此使用 ViewHelper。
编辑:
根据这个答案 在表单中,您不应该为 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>
对其他功能进行相同的更改。
我在本地测试了它,它正常工作。