Question

我尝试使用文本框和提交按钮更改页面上的div。我想获取文本框中输入的文本，并在单击按钮时将其放在div中。我有这段代码：

＆＃13;

function myfunction() { 
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
 }

＆＃13;

<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>

＆＃13;

但没有任何反应。当我在浏览器中尝试它时，它只刷新页面并将?textbox=someValueHere添加到URL的末尾。如何让div显示文本框值？

Answer 1

问题是提交按钮正在发布表单，因此您没有看到更改 - 如果您将提交按钮更改为普通按钮，它将起作用

<input type="button"name="button" id="button" onclick="myfunction()" />

Answer 2

因为正在提交表单，所以没有任何结果。您需要阻止发生默认操作，即表单提交。有关如何防止发生事件默认操作的详细信息，请参阅MDN中的return false或event.preventDefault()。

Answer 3

致电function myfunction(e) { e.preventDefault(); var myText = document.getElementById("textbox").value; document.getElementById('myDiv').innerHTML = myText; } <form> <input type="text" name="textbox" id="textbox" /> <input type="submit" name="button" id="button" onclick="myfunction(event)" /> </form> <br/> <div id="myDiv"></div>以阻止正常的表单提交。

// We'll want this for later
$server_timezone = date_default_timezone_get();

// Did the user supply a timezone and is it valid?
if(
    $_POST['user_supplied_timezone'] !== '' &&
    date_default_timezone_set($_POST['user_supplied_timezone']) === TRUE
)
{
    // This accepts yyyy/m/d or yyyy/mm/dd formats
    if(
        $_POST['user_year'] === date('Y') &&
        ($_POST['user_month'] === date('n') || $_POST['user_month'] === date('m')) &&
        ($_POST['user_day'] === date('j') || $_POST['user_day'] === date('d'))
    )
    {
        // TRUE
    }
}

// It is officially "later"
date_default_timezone_set($server_timezone);

Answer 4

表单正在提交。你需要通过添加return false来阻止它; （如果您使用的是Jquery）或者完全删除表单则不需要。

function myfunction() { 
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
    return false;
 }

使用Javascript onClick更改div内容

4 个答案: