テキストの文字列の値を変更する

私は作成したプログレスバーを持っていますが、今は進捗値を<h1>タグに追加しています。私が達成したいのは、古い価値を新しい価値に置き換えることです。私は値を更新するために使用できる予約語があるかどうか分かりません。正しい方向への助けやプッシュは大いに感謝します。テキストの文字列の値を変更する

ありがとうございます！

これは私がこれまで持っているものです。

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("visual-progress").append(bar.value); 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

出典

2017-10-19 ThomasBrushel

変更.innerHTML = bar.value;から.append(bar.value);。

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("progress").innerHTML = bar.value; 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress <span id="progress">0</span>%</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

出典

2017-10-19 14:27:55

あなたは.innerHTML代わりの.append()

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("visual-progress").innerHTML = bar.value + "%"; 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

出典

2017-10-19 14:28:01 guest271314

テキストを上書き/アクセスに初期値と.innerHTMLを格納するローカル変数を使用を使用することができます：

let initialValue = document.getElementById("visual-progress").innerHTML; 

button.addEventListener('click', function(){ 
    if(bar.value >= 100) { 
    bar.value=100; 
    } else { 
    bar.value+=25; 
    } 
    var newValue = initialValue + ' ' + bar.value; 
    document.getElementById("visual-progress").innerHTML = newValue; 
});

出典

2017-10-19 14:29:03 dhilt

の"プログレスバー"テキストを置き換えるのではなく、理由がないように見える余分な変数）？ –

彼は、 "視覚進行"のテキストを変えたいと願っていました。それが私がどのように要件を理解したか、そして私が正しいように見えます。これは彼のスニペットからも続く... – dhilt

私は現在のテキストをクリアし、それを所望のテキストに置き換えます。

var thisInfo = document.getElementById("visual-progress").innerHtml.Remove(); 
thisInfo = bar.value;

削除機能を必要とせずに、divのinnerHtmlを新しい値に割り当てる方が良いかもしれません。同じように動作する必要があります。

var thisInfo = document.getElementById("visual-progress").innerHtml = bar.value;

はそれが役に立てば幸い

出典

2017-10-19 14:31:49 JakeofSpades

使用.innerHTML代わりにあなたは「視覚的な進行中」のテキストを置き換え（および使用することをお勧めになり彼の質問に関連するいくつかの理由がある.append() .like document.getElementById("visual-progress").innerHTML = bar.value + "%";

出典

2017-10-19 14:40:56

テキストの文字列の値を変更する

答えて

関連する問題