So I'm making an Editor website, and I want to have a save button that will only save the code written in the box, and not the entire editor code

Question

So, as I mentioned I am making an HTML, CSS and JavaScript editor and I need a save button, but I'm not sure of the code for it. I know a code that will make it save the entire code (script) for the editor, but I don't want that, I want to make a Save button that will only save what the visitor types in the text box!

Bellow is my button codes! NOTE: I only need the "Save Button" code!

Code

.btn-run
{
    padding:8px;
    background-color:#3A65FF;
    border:none;
    color:#FFFFFF;
    border-radius:2px;
    transition:all 0.3s;
}

.btn-run:hover
{
    background-color:#404040;
}
#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}

<div id="outer">
  <div class="inner">
    <form><textarea name="sourceCode" id="sourceCode"></textarea></form>
    <button onClick="runCode();" class="btn-run" type="button" style="float: 
    none;">Save Code</button>
  </div>
</div>

I guess you have some input and textbox, maybe a form. Can you provide a larger example. you can edit the snippet. — MaxiGui, Feb 10 '21 at 08:34
Does this answer your question? [Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?](https://stackoverflow.com/questions/13685263/can-i-save-input-from-form-to-txt-in-html-using-javascript-jquery-and-then-us) — MaxiGui, Feb 10 '21 at 08:40
Not really.. I already got the button code set up.. Just wondering is it possible to make the save function only using "onClick="..."" and maybe a JavaScript... If yes, then I would like the direct code for the button. — How2Code, Feb 10 '21 at 08:51

score 1 · Accepted Answer · answered Feb 10 '21 at 09:14

You can get what the user has typed in your textarea using the .value property and get the data that the user has written.

function runCode(){
  let userWrittenCode = document.getElementById("sourceCode");
  
  if(!userWrittenCode.value) console.log("Please write some code");
  else{
    //Do user input code sanitization
    console.log("Your Data is: ");
    console.log(userWrittenCode.value); 
  }
}

.btn-run {
  padding: 8px;
  background-color: #3A65FF;
  border: none;
  color: #FFFFFF;
  border-radius: 2px;
  transition: all 0.3s;
}

.btn-run:hover {
  background-color: #404040;
}

#outer {
  width: 100%;
  text-align: center;
}

.inner {
  display: inline-block;
}

<div id="outer">
  <div class="inner">
    <form><textarea name="sourceCode" id="sourceCode"></textarea></form>
    <button onClick="runCode();" class="btn-run" type="button" style="float: 
        none;">Save Code</button>
  </div>
</div>

So I'm making an Editor website, and I want to have a save button that will only save the code written in the box, and not the entire editor code

Code

1 Answers1