Javascript 如何在上一个web表单输入数据后使其显示？

我希望在第一个web表单输入内容后，再显示第二个web表单。我目前使用的是一个sinatra，它使用slim作为模板引擎，并使用纯javascript

input#topic value="Enter topic" onfocus="this.value = this.value=='Enter topic'?'':this.value;" onblur="this.value = this.value==''?'Enter topic':this.value;"

input#subtopic value="Enter subtopic" onfocus="this.value = this.value=='Enter subtopic?'':this.value;" onblur="this.value = this.value==''?'Enter subtopic':this.value;"

上面是我的两个表单，onfocus和onblur会使表单值消失，如果单击就会重新出现

我的javascript如下所示

function checkField(field) {
    if(field.value != null) {
        document.getElementById('subtopic_form').style.display = 'true';
    } else {
        document.getElementById('subtopic_form').style.display = 'false';
    }
}

这不起作用，部分问题是当我添加到输入标记时

onchange="checkField(this)"

然后，我在javascript文件中得到一条函数未使用的消息，即使我已经在my home.slim文件中指定了它

script src="/js/application.js"

非常感谢您能为我提供所需的任何帮助。 我愿意为此使用jquery，如果有任何方法可以使第二个表单对外观产生影响，那将是非常棒的

---

-Adam

显示属性接受多个值，但true和false不在其中。要获取完整列表，请转到或。但我现在可以告诉您，您最可能想要的值是“无”和“块”，如：

不过，使用jQuery，这段代码可能会更干净一些

function checkField(field) {
    if (field.value != null && field.value != '') {
        $("#subtopic_form").show();
    } else {
        $("#subtopic_form").hide();
    }
}

甚至

$("#topic").change(function(){
    if ($(this).val()) {
        $("#subtopic_form").show();
    } else {
        $("#subtopic_form").hide();
    }
});

并且如果需要效果，请考虑jQuery或代替.Head（）

请注意，我添加了field.value！=''到您的代码。此外，最好使用！==而不是！=

：）

$("#topic").change(function(){
    if ($(this).val()) {
        $("#subtopic_form").show();
    } else {
        $("#subtopic_form").hide();
    }
});