Po kliknięciu napisz

pytanie zadane 23 września 2020 w JavaScript przez ratched Nowicjusz (180 p.)

Cześć,

Planuje napisać stronę,w której po kliknięciu ma pojawić się coś w polu tekstowym. Jednak rozwiązanie, które zdaje się mi działać, nie działa.

Może ktoś z Was mógłby pomóc?

<script type="text/javascript" >


var b1 = document.getElementByid("B");

    
b1.onclick = function() {
    post.innerHTML = '[b] [/b]';
}
 


</script>


<form action='' method='POST'>
<fieldset><legend>Dodaj post</legend>

<div>

     <div> <input type="button" class="przycisk_post" value="B" id="B" onclick="function()"  />  </div>
	 
<div>  <textarea name='post' cols='80' rows='30' id="post"> </textarea> </div>

<div> &nbsp;  <input type='submit' value='Dodaj'> </div>
	
  
  <div>
</fieldset>
  </form>\n

2 odpowiedzi

odpowiedź 23 września 2020 przez VBService Ekspert (252,740 p.)
wybrane 25 września 2020 przez ratched

Najlepsza

Drobne poprawki i ... CodePen [Edit]

<body>
<form action="" method="POST">
  <fieldset>
    <legend>Dodaj post</legend> 
    <div>
      <div> 
        <input type="button" class="przycisk_post" value="B" id="bold">  
      </div>
      <div>
        <textarea name="post" cols="80" rows="30" id="post"></textarea>
      </div>
      <div>
        <input type="submit" value="Dodaj">        
      </div>   
    <div>
  </fieldset>
</form>
<script>
const b_bold = document.getElementById("bold");
const post_textarea = document.getElementById("post");
     
b_bold.addEventListener("click", () => {
  // https://stackoverflow.com/questions/34968174/set-text-cursor-position-in-a-textarea
  const start = post_textarea.selectionStart;
  const end = post_textarea.selectionEnd;
  const text = post_textarea.value.substring(start,end);
  const text_before = post_textarea.value.substring(0, start);
  const text_after = post_textarea.value.substring(end);                                                                  
  post_textarea.value = `${text_before}[b]${text}[/b]${text_after}`;
  post_textarea.focus();
  post_textarea.selectionEnd = end + 3; // "[b]".length
})
</script>
</body>

może to będzie przydatne CodePen [Edit]

<style>
.przycisk_post {
  font: 1em monospace;
  width: 20px;
  text-align: center;
  padding: 0;
  cursor: pointer;
}
input[id="bold"].przycisk_post  {
  font-weight: bold;
}
input[id="italic"].przycisk_post  {
  font-style: italic;
}
input[id="underline"].przycisk_post  {
  text-decoration: underline;
}
</style>
<body>
<form action="" method="POST">
  <fieldset>
    <legend>Dodaj post</legend> 
    <div>
      <div> 
        <input type="button" class="przycisk_post" value="B" id="bold">
        <input type="button" class="przycisk_post" value="I" id="italic">
        <input type="button" class="przycisk_post" value="U" id="underline">
      </div>
      <div>
        <textarea name="post" cols="80" rows="30" id="post"></textarea>
      </div>
      <div>
        <input type="submit" value="Dodaj">        
      </div>   
    <div>
  </fieldset>
</form>

<script>
const b_posts = document.querySelectorAll(".przycisk_post");
const post_textarea = document.getElementById("post");
     
b_posts.forEach((b_post) => {
  b_post.addEventListener("click", ({target}) => {
    let code_open = [];
    
    switch (target.id) {
      case "bold":
        code = ["[b]","[/b]"];
      break;
      case "italic":
        code = ["[i]","[/i]"];
      break;
      case "underline":
        code = ["[u]","[/u]"];
      break;        
    }
    
    // https://stackoverflow.com/questions/34968174/set-text-cursor-position-in-a-textarea
    const start = post_textarea.selectionStart;
    const end = post_textarea.selectionEnd;
    const text = post_textarea.value.substring(start,end);
    const text_before = post_textarea.value.substring(0, start);
    const text_after = post_textarea.value.substring(end);
    post_textarea.value = `${text_before}${code[0]}${text}${code[1]}${text_after}`;
    
    post_textarea.focus();
    const set_cursor_position = end + code[0].length;
    post_textarea.selectionEnd = set_cursor_position;
  })
})  
</script>
</body>

komentarz 24 września 2020 przez ratched Nowicjusz (180 p.)

Fajnie działa, tylko jest mały problem. Po wpisaniu jakiegoś tekstu w area to przycisk przestaje działać ;/ Wiesz może dlaczego? Szukałem pół internetu i nic z tym faktem nie znalazłem.

komentarz 25 września 2020 przez VBService Ekspert (252,740 p.)

Już poprawione.

komentarz 25 września 2020 przez ratched Nowicjusz (180 p.)

Dzięki wielkie!

odpowiedź 23 września 2020 przez adam_jankowski Mądrala (5,970 p.)

Masz tutaj 3 błędy. Po pierwsze przypisujesz zmiennej b1 element, który w momencie czytania skryptu jeszcze nie istnieje (skrypt jest przed przyciskiem). Po drugie zmiana innerHTML musi również zostać wywołana na rzecz elementu HTML (document.getElementById("post").innerHTML = ). Po trzecie masz źle zapisane wywołanie funkcji. W skrypcie zapisz samo: function funkcja() { //ciało funkcji } a w inpucie onclick="funckja()".

Mam nadzieję, że pomogłem

komentarz 23 września 2020 przez ratched Nowicjusz (180 p.)

Niestety dalej nie działa, nawet jak wpisze do onclik= document.getElementById("post").innerHTML = '[b] [/b]';

To nie działa. Nie pokazuje żadnych błędów nic, po prostu klikam i nic się nie dzieje.