0
送信ボタンをクリックすると、すべての名前とファーストネームがdivのcontactcard1に置かれ、クリックするとcontactcard2に切り替わります連絡先1と2のボックスと同じようにページ上に新しいボックスを動的に作成します。私はこれのほとんどが動作しているが、これらの機能を動作させるように見えることはできません。私はdocument.onをオンにして機能を利用できるようにしました。しかし、この問題を解決するための助けになるでしょう。ダイナミックとテキストプレースメントの問題
マイHTML
!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"></style>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#tabletop');
$('.button').click(function() {
var row = tabletop.insertRow();
['1stname', '2ndname', '3rdname', '4thname'].forEach(function(elementId) {
var cell = row.insertCell();
cell.innerHTML = document.getElementById(elementId).value;
});
});
});
function switchVisible() {
if (document.getElementById('contactcard1') !== undefined) {
if (document.getElementById('contactcard1').style.display == 'block') {
document.getElementById('contactcard1').style.display = 'none';
document.getElementById('contactcard2').style.display = 'block';
} else {
document.getElementById('contactcard1').style.display = 'block';
document.getElementById('contactcard2').style.display = 'none';
}
}
}
$('button').append('#maindiv')
$(document).on()
</script>
</head>
<body>
<div id='wrapper'>
<div id='container1'></div>
<div id=maindiv>
<div id='container2'>
<form id='form1'>
First name:<br>
<input id='1stname' type="text" name="firstname" value="First Name">
<br> Last name:<br>
<input id='2ndname' type="text" name="lastname" value="Last Name">
<br> Description:<br>
<input id='3rdname' type="text" name="description" value="Description">
</form>
<button class='button'>Submit</button>
</div>
<div id='container3'>
<div id='contactcard1'>
<table id='tabletop'>
<tr>
<th id='first'>First Name</th>
<th id='last'>Last Name</th>
<input id="Button1" type="button" value="See My Description" onclick="javascript:switchVisible();" />
</tr>
</table>
</div>
<div id='contactcard2'>
<table id='tabletop1'>
<tr>
<th id='description'>Description</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
MY CSS
*
#wrapper{
width: 800px;
margin: 0 auto;
overflow: hidden;
border: 1px solid black ;
}
#container1{
width: 800px;
height: 100px;
display: inline-block;
border: 1px solid black ;
}
#container2{
width: 200px;
height: 500px;
display: inline-block;
border: 1px solid black ;
margin: 0 auto;
}
#container3{
width: 580px;
height: 500px;
display: inline-block;
border: 1px solid black ;
vertical-align: top;
}
#form1{
margin-top: 100px;
}
#contactcard1{
width: 350px;
height: 150px;
display: inline-block;
border: 1px solid black;
margin-left: 100px;
}
#contactcard2{
width: 350px;
height: 150px;
display: none;
border: 1px solid black;
margin-left: 100px;
}
#button1{
vertical-align: bottom;
}
あなたは私が更新のための私の答え –
をリンクしませんでしたあなたは 'description'ボタンをクリックすると、あなたのコードが動作していない –
のTyが、それはボタンを通じてクリックしてください –