IDのデモの内部HTMLをここで変更できないのはなぜですか？

<p id="demo"></p> 
<form name="names" action="" method="POST" onsubmit="getinputs(document.getElementByName(firstname),document.getElementByName(secondname))"> 
    Your name:<br> 
    <input type="text" name="firstname"><br> 
    Your crush's name:<br> 
    <input type="text" name="secondname"> 
    <input type="submit" value="Submit"> 
    <br> 
</form> 


<script> 
function getinputs(one, two) 
{ 
document.getElementById('demo').innerHTML=one+two; 
} 
</script>

直感的に動作させるにはどうすればよいですか？両方の値をフォームに渡したいと思います。IDのデモの内部HTMLをここで変更できないのはなぜですか？

出典

2016-07-22 Stuper Duper

idで要素を取得し、フォームの送信を防止します。以下を参照してください：

function getinputs(one, two) { 
 
    event.preventDefault(); 
 
    document.getElementById('demo').innerHTML=one+two; 
 
}

<p id="demo"></p> 
 
<form name="names" action="" method="POST" onsubmit="getinputs(document.getElementById('firstname').value,document.getElementById('secondname').value)"> 
 
    Your name:<br> 
 
    <input type="text" name="firstname" id="firstname"><br> 
 
    Your crush's name:<br> 
 
    <input type="text" name="secondname" id="secondname"> 
 
    <input type="submit" value="Submit"> 
 
    <br> 
 
</form>

https://jsfiddle.net/qL0m7px2/

出典

2016-07-22 09:22:29 havr

。 –

このアプローチは、フォーム提出する上で実行するスクリプトを待たず、フォームが提出されます。フォームの送信時にjsコードを実行する場合は、フォームを作成する必要があります。

<form name="names" action="" method="POST" onsubmit="return getinputs(document.getElementByName(firstname),document.getElementByName(secondname))"> 

---- 
---- 

</form>

そして、スクリプトを変更します。

<script> 
function getinputs(one, two) 
{ 
document.getElementById('demo').innerHTML=one+two; 
return false; 
} 
</script>

出典

2016-07-22 09:24:04

私はそれに役立つことを願って、これを試してみてください

function getinputs() { 
    var form = document.querySelector('#form-id'); 
    document.querySelector('#demo').innerHTML = 
     form.firstname.value + form.secondname.value; 
}

出典

2016-07-22 09:24:37

動作しません！あなたがしたいと思っている変更はありますか？ –

を使用してコードを置き換えると思います。あなたは、次のようにする必要があり

<html> 
 
<body> 
 
<form name="names" action="" method="POST" onsubmit="return getinputs()"> 
 
    Your name:<br> 
 
    <input type="text" id="firstname"><br> 
 
    Your crush's name:<br> 
 
    <input type="text" id="secondname"> 
 
    <input type="submit" value="Submit"> 
 
    <br> 
 
</form> 
 

 

 
<script> 
 
function getinputs() 
 
{ 
 
var one=document.getElementById("firstname"); 
 
var two=document.getElementById("secondname"); 
 

 
document.getElementById("demo").innerHTML=one.value+two.value; 
 
return false; 
 
} 
 
</script> 
 
<p id="demo" ></p> 
 
</body> 
 
</html>

出典

2016-07-22 09:25:52 Pirate

はgetElementByName

を変更getElementsByName

document.getElementsByName（ 'FIRSTNAME'）[0]でなければなりません。値 「名前」を使用してについての質問交渉が、それはあまりにも名前を使用して行うことができたときにIDを使用して、なぜ

<script> function getinputs(one, two) { event.preventDefault(); document.getElementById('demo').innerHTML=one+ " " + two; } </script> <p id="demo"></p> <form name="names" action="" method="POST" onSubmit="getinputs(document.getElementsByName('firstname')[0].value, document.getElementsByName('secondname')[0].value)"> Your name:<br> <input type="text" name="firstname"><br> Your crush's name:<br> <input type="text" name="secondname"> <input type="submit" value="Submit"> <br> </form>

出典

2016-07-22 09:43:33

IDのデモの内部HTMLをここで変更できないのはなぜですか？

答えて

関連する問題