Fatal编程技术网
  • javascript/
  • Javascript 基于web表单上的元素自动生成段落

Javascript 基于web表单上的元素自动生成段落

javascript html forms

Javascript 基于web表单上的元素自动生成段落,javascript,html,forms,paragraph,Javascript,Html,Forms,Paragraph,我试图根据同一页面上的表单选择创建段落的实时预览。我一直在使用这个代码 <script type="text/javascript"> function yesnoCheck() { if (document.getElementById('yesCheck').checked) { document.getElementById('ifYes').style.display = 'block'; } else document.ge

我试图根据同一页面上的表单选择创建段落的实时预览。我一直在使用这个代码

    <script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
    }
    else document.getElementById('ifYes').style.display = 'none';

}

</script>
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
    <div id="ifYes" style="display:none">
        If yes, where: <input type='text' id='yes' name='yes'><br>
        When?  <input type='text' id='acc' name='acc'>
    </div>


函数yesnoCheck（）{
if（document.getElementById（'yesCheck'）。选中）{
document.getElementById（'ifies'）.style.display='block'；
}
else document.getElementById（'Ifies'）.style.display='none'；
}
是否

如果是，位置：

什么时候
我所希望的结果是，将有一个预先准备好的段落，它将出现在表单的底部，并将根据上述选项的选择进行更改。例如，如果选择“是”，则会出现：

X先生将于上午8点在“伦敦”出席

如果选择“否”，则会显示：

X先生将缺席

提前感谢您的帮助。

请尝试以下操作：

<html>
        <head>
        </head>
        <body>
            Yes <input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck"><br>
        <div id="ifYes" style="display:none">
            If yes, where: <input type='text' onchange="onLocationChange();" id='yes' name='yes'><br>
            When?  <input type='text' id='acc' onchange="onTimeChange();" name='acc'>

            <div>
                Mr. X will be present 
                <span id="location" style="display: none;"></span>
                <span id="time" style="display: none;"></span>
            </div>
        </div>
        <div id="ifNo" style="display:none">
           Mr. X will be absent
        </div>

        <script>
        function onLocationChange(){
            var value = document.getElementById('yes').value;
            if (value) {
                document.getElementById('location').style.display = 'inline';
                document.getElementById('location').innerHTML = ' in ' + value; 
            }
            else {
                document.getElementById('location').style.display = 'none';
            }

        }

        function onTimeChange(){
            var value = document.getElementById('acc').value;

            if (value) {
                document.getElementById('time').style.display = 'inline';
                document.getElementById('time').innerHTML = ' at ' + value;
            }
            else {
                document.getElementById('time').style.display = 'none';
            }

        }
        function yesnoCheck() {

            if (document.getElementById('yesCheck').checked) {
                document.getElementById('ifYes').style.display = 'block';
                document.getElementById('ifNo').style.display = 'none';
            }
            else {
                document.getElementById('ifYes').style.display = 'none';
                document.getElementById('ifNo').style.display = 'block';
            }


        }
        </script>
        </body>
    </html>


是否

如果是，位置：

什么时候
X先生将出席
X先生将缺席
函数onLocationChange（）{
var值=document.getElementById（'yes'）。值；
如果（值）{
document.getElementById（'location'）.style.display='inline'；
document.getElementById（'location'）.innerHTML='in'+value；
}
否则{
document.getElementById（'location'）.style.display='none'；
}
}
函数onTimeChange（）{
var值=document.getElementById（'acc'）。值；
如果（值）{
document.getElementById（'time'）.style.display='inline'；
document.getElementById（'time'）.innerHTML='at'+value；
}
否则{
document.getElementById（'time'）.style.display='none'；
}
}
函数yesnoCheck（）{
if（document.getElementById（'yesCheck'）。选中）{
document.getElementById（'ifies'）.style.display='block'；
document.getElementById（'ifNo'）.style.display='none'；
}
否则{
document.getElementById（'ifies'）.style.display='none'；
document.getElementById（'ifNo'）.style.display='block'；
}
}
我希望这是您的要求


函数yesnoCheck（）{
if（document.getElementById（'yesCheck'）。选中）{
document.getElementById（'ifies'）.style.display='block'；
document.getElementById（'targetDiv'）。innerHTML=“”
}
否则{
document.getElementById（'targetDiv'）.innerHTML=“X先生将缺席”；
document.getElementById（'ifies'）.style.display='none'；
document.getElementById（'yes'）。value=“”
document.getElementById（'acc'）。value=“”
}
}
函数showResult（）{
var yes=document.getElementById（'yes'）。值
var acc=document.getElementById（'acc'）。值
如果（是！=“”&&acc！=“”）{
document.getElementById（'targetDiv'）.innerHTML=“X先生将出现在'''+yes+'中''+acc+'中”
} 
否则{
警报（“输入为空”）
}
}

是否

如果是，位置：

什么时候
显示结果
对不起，我希望根据上面表格的选择，在表格底部自动生成一个段落。请立即尝试。。缺席的段落将显示在“无选择”中。。。让我知道，如果你想改变事件的用户键入的代码，以及这将是非常有用的。例如，当有人选择“是”以及“地点”和“时间”时。请使用所有事件处理程序和所有内容尝试更新的答案。。更新输入字段后按enter键非常感谢。这正是我一直在寻找的。我真的很感谢你的努力。