I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in place as I plan to add more buttons with different functions. Is there a way to ensure that the button remains visible at all times?
Initially, I tried using the fixed position property, but I soon realized that it only fixes the button to the top of the screen when scrolling down, which is not what I want. Additionally, I noticed that the text formatting changes when I extract the titles. Can anyone explain why this happens?
Your assistance in resolving these issues would be greatly appreciated. Below is the current code snippet:
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#navigation li{
display:inline;
postion:absolute;
}
#navigation a{
padding:2px 2px;
background-color:#09F;
color:#FFFFFF;
}
#navigation a:hover{
background-color:#F90;
color:#666;
}
</style>
<div id="navigation">
<a href="#"><input type=button onclick="myFunction()">
</div>
</head>
<body>
<div>
<p id="demo">
<pre>
<b>This is one title</b>
I'm writing here
the text that I
don't need to get.
<b>Other title</b>
And so we'll test
whether this thing works.
</p>
</pre>
</div>
<script>
function myFunction() {
var text = document.body.innerText;
var titles =text.match(/^\n(.+?)\n\n/mg);
for (var i = 0; i < titles.length; i++) {
document.write(titles[i] + "<br />" + "<br />");
}
}
</script>
</body>
</html>