почему кнопка с именем "copy" не появляется рядом с моим вторым тегом textarea и вместо этого появляется под ним, хотя я сортирую элементы с display: flex; в css? Я попытался поместить display: flex; в css для моего второго тега формы, но это не работает. Спасибо, что нашли время, чтобы прочитать это, мой код ниже.
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function idk() {
/* Get the text field */
var copyText = document.getElementById("ascii");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
body {
margin-top: 2px;
margin-left: 20px;
display: flex;
}
.button {
margin-top: none;
}
.txt {
margin-right: 20px;
background: #ffffff;
border: 0;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 0px;
}
.text {
border: none;
margin-top: 18px;
margin-left: 18px;
height: 660px;
width: 630px;
outline: none;
font-size: 22px;
resize: none;
}
.asci {
background: #ffffff;
border: #4CAF50;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.ascii {
margin-top: 20px;
margin-left: 10px;
height: 660px;
width: 630px;
outline: none;
font-size: 22px;
resize: none;
}
<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="alphabetical.css">
</head>
<body>
<form class="txt">
<textarea class="text" id="input" type="text" placeholder="type your text here" onkeyup="myFunction()"></textarea>
</form>
<form class="asci">
<textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="idk()">
</form>
<script src="alphabetical.js"></script>
</body>
</html>